银行|彻底搞懂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属性【银行|彻底搞懂JavaScript页面的生命周期】
*** DOMContentLoaded不会等待img加载完成，建议不要在DOMContentLoaded中访问img的相关属性。
四、外部样式是否会阻塞DOMContentLoaded的执行？
1. 一般情况，外部样式不会阻塞DOMContentLoaded的执行；
2. 如果外部样式表后有script脚本访问样式属性，则会阻塞script脚本的执行(script脚本会等待外部样式加载完成后执行) ，从而会阻塞DOMContentLoaded的执行。
五、readyState如果我们在加载文档之后监听DOMContentLoaded ，它永远不会执行；在需要的时候，我们可以监听readystatechange事件，通过document.readyState来获得文档的当前状态。