html5 保存页面状态,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树已经构建完毕， 但是像是图片、资源和样式表等外部资源可能并没有下载完毕

DOMContentLoaded注意事项:

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

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

C.因此为了不阻塞DOM树的构建和页面的渲染，

2、load-页面完全加载

浏览器已经加载了所有的资源(图像，样式表等)

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