开发者学堂课程【云开发 Web 应用训练营:web 应用实战第2课：静态网站的全生命周期实践】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/911/detail/14414
web 应用实战第2课：静态网站的全生命周期实践
目录：
一.开发简单的静态应用页面
二.head 内的配置
三.静态网站
四.静态网站自动部署到云存储
五.提醒
六. Active 阶段
七.Passive 阶段
八.Hidden 阶段
九.Terminated 阶段
十.Frozen 阶段
十二.Discarded 阶段
十三.常见场景
十四.事件
一.开发简单的静态应用页面
if(path--'/'){
modulePath . codePath + '/index.html';fileExt . 'html';
if( !fs. existsSync(modulePath)){
modulePath . codePath + . /index. htm' ;if(!fs. existsSync(modulePath) ){
modulePath . codePath + " /default html' ;if( !fs. existsSync (modulePath) )4.
modulePath . codePath + '/defáult. htm';
}
}
}
var fileResponse ={
isBase64Encoded: true,
statusCode: 200,
headers: {
"Content-type": NIME[fileExt)
},
body: Buffer. from(data) . toString("tase64")
}
callback(null, fileResponse);return;
空应用最简单的应用方案
部署日常环境
进入应用列表创建应用
开发最简单的静态网站
所有的请求都是 serverless.js（函数）来处理
点击新建文件 index.htm 文件
插件提供部署功能和测试功能
调制的相关日志可以在控制台输出
当请求的路径是根路径，会默认寻找根目录的 index.html 的文件。
在空应用中创建 index.html
只需要将代码拖拽到到文件模块。即可上传，覆盖之前的文件
测试域名只能在当前浏览器使用
部署日常环境，直接点击部署
二级域名绑定到开发者域名，在应用配置中绑定域名
应用列表点击环境开关。点击关闭验证下线，停止服务，成功下线即可删除应用
二.head 内的配置
1、title 网页标题
2、标签页 icon 图标
图标的文件名要求以 favicon.ico 命名，文件需要与 index.html 文件同级存储
使用方法：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"
3、CSS 分级引入
css 文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共的部分，提供多个 HTML 同时引用。
公共的部分也可以划分范围：有的是所有网站能用的，有的是某几个网站公共的部分
CSS 常见的分层组织：清除默认样式的 CSS 、网站的公共样式 CSS 、每个页面独有的 CSS
注意书写顺序，引入多层 css 时，需要按照后面的层叠前面的 css 进行设置，使用页面独有的样式层叠公共的样式
4、清除默认样式
使用范围：所有的网站都能用
命名的习惯：reset.css
引入时作为第一层引入
注意：reset.css 文件写完后不允许再次更改
5、公共样式
使用范围：单独的一个网站所有的页面、几个页面
制作方法：找到公共部分，划分成不同的模块分别进行 .css 文件的书写
命名习惯：common.css 或者模块名 .css
公共文件中的类名一般不要在其他的 css 文件中再用
引入顺序：一般在 reset.css 的后面，单独样式文件的前面
6、页面独有样式
使用范围：单独的一个 HTML 页面
命名习惯：一般与 HTML 的文件名保持一致，如果拆分的更细致可以使用多个单词的拼写，例如 index_banner.css
引入顺序：所有公共样式的后面
注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重
三.静态网站
目前，静态网站有 2 种：
无内容的单页应用（SPA）：React/VUE 等框架开发的应用；
有内容的 HTML：手写或「程序生成 HTML」；
警告：React/VUE SPA 不带内容，难以被搜索引擎收录，不适合作为公司官网、博客。如果有 SEO 需求，推荐使用 MkDocs、Hexo、VUE Nuxt、React Next。
四.静态网站自动部署到云存储
通过「持续集成」生成 HTML，自动部署到「云存储」，变成静态网站。
1、在「腾讯云 对象存储 COS」中创建一个「公有读私有写」的「存储桶」，并在设置中开启「静态网站」，获得分配的二级域名「访问链接」。
为下线不可删除应用
可以在测试环节先上线，测试稳定后，愈发测试，最后正式上线。
2、把项目代码推送到「CODING 代码仓库」，在「CODING 持续集成」中创建一个构建计划，选择「构建并上传到腾讯云 COS」模板，填入「腾讯云 COS 访问密钥」等信息，根据自己的代码框架修改编译命令。
创建后会自动触发构建，等待构建成功，访问分配的链接即可看到网站。
下次推送代码即可自动部署。
3、如果你的域名已备案，则可在「腾讯云 对象存储」的设置中绑定「自定义加速域名」，会提示开通「内容分发网络 CDN」，小型网站推荐选择「按使用流量计费」（每月赠送 10GB，一般用不完），将会获得一个 CNAME。
4、在「DNS 解析」中设置 www 和 根域名，确保两者皆可访问，并且二选一进行跳转避免影响 SEO，推荐 2 种方案：
此域名无邮箱：根域名指向 CDN，www 跳转到根域名，本文采用此方案，把 www.devops.host 跳转到了 devops.host
此域名有邮箱：www 指向 CDN，根域名跳转到 www
5、在「内容分发网络 CDN」——「域名管理」——某个域名——「高级设置」——「HTTPS 配置」中，申请免费的 HTTPS 证书，并开启「HTTPS 回源」、「强制跳转 HTTPS」和「HTTP 2.0」。
6、开通「腾讯云 云函数 SCF」，按照文档「使用 SCF 自动刷新被 CDN 缓存的 COS 资源」上传代码。
五.提醒：
如果网站面向中国境内用户，需要进行域名备案，然后才能绑定到境内的云存储/CDN 。本文以腾讯云为例，其他云计算厂商的流程也类似。
如果网站面向中国境外用户，可直接使用境外云存储/CDN 搭建静态网站。
Jenkinsfile
pipeline {
agent any
stages {
stage('检出') {
steps {
checkout([$class: 'GitSCM',
branches: [[name: env.GIT_BUILD_REF]],
userRemoteConfigs: [[
url: env.GIT_REPO_URL,
credentialsId: env.CREDENTIALS_ID
]]])
}
}
stage('安装依赖') {
steps {
sh 'npm i -g lint-md-cli'
sh 'pip install mkdocs'
}
}
stage('检查书写规范') {
steps {
sh 'lint-md docs/'
}
}
stage('编译') {
steps {
sh 'mkdocs build'
}
}
stage('上传到 COS Bucket') {
steps {
sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY}" +
" -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
sh 'coscmd upload -r ./site/ /'
echo "预览 https://${env.COS_BUCKET_NAME}.cos-website.${env.COS_BUCKET_REGION}.myqcloud.com/"
}
}
}
}
六. Active 阶段
在 Active 阶段，网页处于可见状态，且拥有输入焦点。
七.Passive 阶段
在 Passive 阶段，网页可见，但没有输入焦点，无法接受输入，UI 更新（比如动画）仍然在执行；该阶段只可能发生在桌面同时有多个窗口的情况。
八.Hidden 阶段
在 Hidden 阶段，用户的桌面被其他窗口占据，网页不可见，但尚未冻结；UI 更新不再执行。
九.Terminated 阶段
在 Terminated 阶段，由于用户主动关闭窗口，或者在同一个窗口前往其他页面，导致当前页面开始被浏览器卸载并从内存中清除；注意，这个阶段总是在 Hidden 阶段之后发生，也就是说，用户主动离开当前页面，总是先进入 Hidden 阶段，再进入 Terminated 阶段。
这个阶段会导致网页卸载，任何新任务都不会在这个阶段启动，并且如果运行时间太长，正在进行的任务可能会被终止。
十.Frozen 阶段
如果网页处于 Hidden 阶段的时间过久，用户又不关闭网页，浏览器就有可能冻结网页，使其进入 Frozen 阶段；不过，也有可能，处于可见状态的页面长时间没有操作，也会进入 Frozen 阶段。
这个阶段的特征是，网页不会再被分配 CPU 计算资源：
定时器、回调函数、网络请求、DOM 操作都不会执行，不过正在运行的任务会执行完。
浏览器可能会允许 Frozen 阶段的页面，周期性复苏一小段时间，短暂变回 Hidden 状态，允许一小部分任务执行。
十一.Discarded 阶段
如果网页长时间处于 Frozen 阶段，用户又不唤醒页面，那么就会进入 Discarded 阶段，即浏览器自动卸载网页，清除该网页的内存占用；不过，Passive 阶段的网页如果长时间没有互动，也可能直接进入 Discarded 阶段。
这一般是在用户没有介入的情况下，由系统强制执行，任何类型的新任务或 JavaScript 代码，都不能在此阶段执行，因为这时通常处在资源限制的状况下。
网页被浏览器自动 Discarded 以后，它的 Tab 窗口还是在的。如果用户重新访问这个 Tab 页，浏览器将会重新向服务器发出请求，再一次重新加载网页，回到 Active 阶段。
十二.常见场景
以下是几个常见场景的网页生命周期变化：
（1）用户打开网页后，又切换到其他 App，但只过了一会又回到网页。
-> 网页由 Active 变成 Hidden，又变回 Active。
（2）用户打开网页后，又切换到其他 App，并且长时候使用后者，导致系统自动丢弃网页。
-> 网页由 Active 变成 Hidden，再变成 Frozen，最后 Discarded。
（3）用户打开网页后，又切换到其他 App，然后从任务管理器里面将浏览器进程清除。
-> 网页由 Active 变成 Hidden，然后 Terminated。
（4）系统丢弃了某个 Tab 里面的页面后，用户重新打开这个 Tab。
-> 网页由 Discarded 变成 Active。
十三.事件
生命周期的各个阶段都有自己的事件，以供开发者指定监听函数，这些事件里面，只有两个是新定义的（freeze 事件和 resume 事件），其它都是现有的。
注意，网页的生命周期事件是在所有帧（frame）触发，不管是底层的帧，还是内嵌的帧；也就是说，内嵌的 <iframe> 网页跟顶层网页一样，都会同时监听到下面的事件：
（1）focus 事件
focus 事件在页面获得输入焦点时触发，比如网页从 Passive 阶段变为 Active 阶段。
（2）blur 事件
blur 事件在页面失去输入焦点时触发，比如网页从 Active 阶段变为 Passive 阶段。
（3）visibilitychange 事件
visibilitychange 事件在网页可见状态发生变化时触发，一般发生在以下几种场景：
用户隐藏页面（切换 Tab、最小化浏览器），页面由 Active 阶段变成 Hidden 阶段
用户重新访问隐藏的页面，页面由 Hidden 阶段变成 Active 阶段
用户关闭页面，页面会先进入 Hidden 阶段，然后进入 Terminated 阶段
可以通过 document.onvisibilitychange 属性指定这个事件的回调函数。
（4）freeze 事件
freeze 事件在网页进入 Frozen 阶段时触发。
可以通过 document.onfreeze 属性指定在进入 Frozen 阶段时调用的回调函数：
function handleFreeze(e) {
// Handle transition to FROZEN } document.addEventListener('freeze', handleFreeze); // 或者
document.onfreeze = function() { … }
这个事件的监听函数，最长只能运行 500 毫秒，并且只能复用已经打开的网络连接，不能发起新的网络请求。
注意，从 Frozen 阶段进入 Discarded 阶段，不会触发任何事件，无法指定回调函数，只能在进入 Frozen 阶段时指定回调函数。
（5）resume 事件
resume 事件在网页离开 Frozen 阶段
变为 Active / Passive / Hidden 阶段时触发。
document.onresume 属性指的是页面离开 Frozen 阶段、进入可用状态时调用的回调函数：
function handleResume(e) { // handle state transition FROZEN -> ACTIVE } document.addEventListener("resume", handleResume);
// 或者
document.onresume = function() { … }
（6）pageshow 事件
pageshow 事件在用户加载网页时触发，这时，有可能是全新的页面加载，也可能是从缓存中获取的页面；如果是从缓存中获取，则该事件对象的 event.persisted 属性为 true，否则为 false。
这个事件的名字有点误导，它跟页面的可见性其实毫无关系，只跟浏览器的 History 记录的变化有关。
（7）pagehide 事件
pagehide 事件在用户离开当前网页、进入另一个网页时触发，它的前提是浏览器的 History 记录必须发生变化，跟网页是否可见无关。
如果浏览器能够将当前页面添加到缓存以供稍后重用，则事件对象的 event.persisted 属性为 true； 如果页面添加到了缓存，则页面进入 Frozen 状态，否则进入 Terminatied 状态。
（8）beforeunload 事件
beforeunload 事件在窗口或文档即将卸载时触发，该事件发生时，文档仍然可见，此时卸载仍可取消；经过这个事件，网页进入 Terminated 状态。
（9）unload 事件
unload 事件在页面正在卸载时触发，经过这个事件，网页进入 Terminated 状态。
