Web前端基础篇-HTML-02-HTML的生命周期

从大前端的角度来讲每个页面都有生命周期，iOS有view生命周期，web页面同样也有生命周期；
so, 问题来啦，web生命周期我们怎么监测呢？
答：生命周期会固定执行某一些方法（函数），我们只要监听函数就可以啦

tmpdir__17_9_7_15_04_07.jpg

生命周期执行函数顺序：

1、DOMContentLoaded-页面开始加载
2、load-页面完全加载
3、beforeunload-页面离开前
4、unload-页面完成离开
同时您可以直接监听readystatechange -监听页面加载的状况

1、DOMContentLoaded-页面开始加载

浏览器已经完全加载了HTML、DOM树已经构建完毕，但是像是图片、资源和样式表等外部资源可能并没有下载完毕
$\color{red}{DOM加载完毕，所以js可以访问所有DOM节点，初始化界面}$

DOMContentLoaded注意事项:

A. HTML页面时遇到了js标签，将无法继续构建DOM树。 UI渲染线程与JS引擎是互斥的，当JS引擎执行时UI线程会被挂起，必须立即执行脚本

B. HTML页面时遇到了外部脚本js,也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本;

C.因此为了不阻塞DOM树的构建和页面的渲染， $\color{red}{所以引入async和defer}$

2、load-页面完全加载

浏览器已经加载了所有的资源（图像，样式表等）
$\color{red}{附加资源已经加载完毕，可以在此事件触发时获得图像的大小}$

3、beforeunload-页面离开前

如果用户即将离开页面或者关闭窗口时,可以询问用户是否保存了更改以及是否确定要离开页面

4、unload-页面完成离开

用户离开页面的时候，window对象上的unload事件会被触发，我们可以做一些不存在延迟的事情，比如关闭弹出的窗口，可是我们无法阻止用户转移到另一个页面上

5、额外可以监听readystatechange：监听页面加载的状况

A.loading 加载中
B.interactive 互动 - 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载
C.complete - 文档和所有子资源已完成加载。状态表示 load 事件即将被触发

监听方法

 document.addEventListener('DOMContentLoaded', function () {
    console.log('页面开始加载------DOMContentLoaded');
});
window.onload = function() {
    console.log('页面完全加载------onload');
    this.getWindowWidthHeight();
};
window.onbeforeunload = ()=>{
    console.log('页面离开前------onbeforeunload');
};
window.onunload = ()=>{
    console.log('页面完成离开------onunload');
};

document.addEventListener('readystatechange', function () {
    console.log('页面当前状态-----readyState=',document.readyState);
});

结果:

页面开始加载------DOMContentLoaded
页面当前状态-----readyState= complete
页面完全加载------onload

H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
 Web前端基础篇-HTML-02-HTML的生命周期
 Web前端基础篇-HTML-03-事件处理系统
 Web前端基础篇-HTML-04-HTML 渲染流程
 Web前端基础篇-HTML5-05-最全本地存储总结
 Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制

最后编辑于：2020.06.22 21:54:07