html5页面的生命周期,前端页面生命周期

前言

对页面声明周期的总结与回忆。

下文均为个人测试得出的结论，如有不对望指出。

正文

了解页面声明周期面前，需要了解几个概念。

1.在页面中dom加载与css加载是异步的。但是呢，也不绝对，比如内联css是同步的。

2.页面中js加载与dom加载是同步的，但是也不绝对，这个比较复杂后文介绍。

先看下页面的生命周期:

DomContentLoaded:dom加载完毕，但是外部资源可能没有加载完毕，如样式表、图片资源等。

load:浏览器所有资源加载完毕。

beforunload/unload 当用户离开页面的时候触发。

在我们写demo的时候，往往这样写:

window.οnlοad=function(){

}

可能会把我们初始化的资源都写在onload中，但是在正常项目中，这样写的效率是不高的。

因为DomContentLoaded 这个时候就已经加载完了我们的Dom，这个时候就可以操作dom了。

但是因为样式没有加载，如果需要动态去获取样式的一些属性，那么就需要在onload中了。

DOMContentLoaded

用法:

document.addEventListener("DOMContentLoaded",ready);

function ready()

{

console.log("ready");

}

因为前面提及到dom加载与资源加载是异步的，这时候不要去拿取资源，所