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-浏览器缓存机制