easyui 页面加载完成执行from_彻底搞懂JavaScript页面的生命周期

DOMContentLoaded

触发：浏览器完全加载了HTML，并构建了DOM树，但是像图片和样式表这样的外部资源可能还没有加载。

作用：DOM已经准备好了，所以处理程序可以查找DOM节点，初始化接口。

load

触发：浏览器加载了所有资源(图片，样式等)。

作用：额外的资源被加载，我们可以得到图像大小(如果没有在HTML/CSS中指定)等等。

beforeunload/unload

触发：当用户离开页面时。

作用：当用户要离开，我们可以检查用户是否保存了更改，并询问他是否真的想要离开；或者离开后发送一些数据报告等。

readystatechange

触发：当文档状态发生改变时。

作用：document.readyState可以获取当前文档的加载状态。

讲解

示例代码

执行顺序

1.alert(“outside.”);

2.alert(“inline.”);

3.alert(getComputedStyle(document.body).width);

4.alert(“defer.”);

5.readyState:interactive；

6.alert(“DOM ready!”);

7.readyState:interactive；

8.alert(“load!”);

9.alert(“beforeunload!”);

10.alert(“unload!”);

*** alert(“async”)在什么时候执行？有可能在alert(“defer.”)之前或之后，也有可能在alert(“DOM ready!”)之前或之后。

一、script中defer与async的异同

共同点：两者都告诉浏览器可以继续处理页面，并在“后台”加载脚本，然后在加载时运行脚本。因此脚本不会阻止DOM构建和页面呈现。

不同点：如果一个页面中有多个带有defer修饰符的script标签，它们会按照顺序进行加载并且在DOMContentLoaded之前执行；async修饰符则不会遵循顺序，它什么时候加载完成什么时候执行(有可能在DOMContentLoaded之前，也有可能在DOMContentLoaded之后)。

使用场景：defer一般用在脚本相互依赖性的时候，能保证执行顺序；而async比较适用于完全独立的脚本。

二、动态加载script

动态script的默认行为是async

1.异步，不会阻塞渲染；

2.先加载完成，先运行。

三、在DOMContentLoaded中访问img属性

*** DOMContentLoaded不会等待img加载完成，建议不要在DOMContentLoaded中访问img的相关属性。

四、外部样式是否会阻塞DOMContentLoaded的执

行？

1. 一般情况，外部样式不会阻塞DOMContentLoaded的执行；

2. 如果外部样式表后有script脚本访问样式属性，则会阻塞script脚本的执行(script脚本会等待外部样式加载完成后执行)，从而会阻塞DOMContentLoaded的执行。

五、readyState

如果我们在加载文档之后监听DOMContentLoaded，它永远不会执行；在需要的时候，我们可以监听readystatechange事件，通过document.readyState来获得文档的当前状态。

document.readyState三态：

“loading” – 文档正在加载中；

“interactive” – 文档已经准备完全好；

“complete” – 文档和所有资源加载完成。

*** document.readyState:interactive与DOMContentLoaded相同；document.readyState:complete与window.onload相同。