银行|彻底搞懂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来获得文档的当前状态 。
推荐阅读
- 曾被京东物流效仿，让雷军花1亿拯救，如今欠7000万彻底出局
- 线下市场彻底“乱了”！小米宣布新规！华为捆绑加价行为迎争议
- 一波未平一波又起，我买个菜就欠了一笔贷款？美团这次彻底没话说
- 微软|外媒：微软将对Windows 10界面进行彻底改进 已招兵买马
- 华为P50真机图曝光：外形变化很彻底
- 京东7FRESH迎来彻底变革
- Windows 10等软件全部封杀 Flash彻底说再见
- 长沙|视频｜聚焦“数字英雄”长沙银行冠名全国首档程序员电视真人秀
- 尼康相机将于2021年底前彻底告别“日本产”
- 微信的一项更新，彻底让用户“反感”，这是要开启直播时代？