摘要：如果添加了属性，那么和的时间差取决于的下载和执行时间。表示告诉浏览器，这段在后执行。一旦执行完，就会触发如果属性为，那么和又几乎没什么区别了，因为的解析不会阻塞，也不阻塞事件。页面上的元素已经加载完毕了。动态插入的图片会阻塞事件，不会。
domLoading
浏览器开始解析dom树的时间点
domInteractive表示浏览器已经解析好dom树了。
domContentLoaded同步的JS已经执行完毕了。
这里需要再解释一点：
由于同步JS会阻塞Dom的解析，因此在有同步JS的情况下，domInteractive和domContentLoaded的区别不大。
如果JS添加了defer属性，那么domInteractive和domContentLoaded的时间差取决于JS的下载和执行时间。defer JS表示告诉浏览器，这段JS在domInteractive后执行。见http://www.w3.org/TR/html5/syntax.html#the-end 。一旦执行完defer JS，就会触发domContentLoaded.
如果JS属性为async，那么domContentLoaded和domInteractive又几乎没什么区别了，因为js的解析不会阻塞dom，也不阻塞domContentLoad事件。
onload页面上的元素已经加载完毕了。包括所有CSS, JS, Image等等。
一些小实验以下示例均采用blocking做实验，可以访问在线版。
疑问1：同步的JS通过document.write写入JS script会不会延迟DomContentLoaded?
结论：会。从例子中可以看到，DomContentLoaded必须等到同步写入的JS文件写完才触发。
代码：
{{flush 1000}}
Hello World
时间线：
疑问2： 同步的JS动态插入defer JS会不会延迟DomContentLoaded?
结论：不会延迟comContentLoaded，但会阻塞onload的时间。需要补充的是，即便是动态插入没有defer的JS，也不会延迟DomContentLoaded.
对于如下代码：
{{flush 1000}}
Hello World
时间线如下：（蓝色为主文档，黄线为JS文件）
疑问3：如果在domContentLoaded的时刻动态插入（同步/defer/async)的script，会不会阻塞onload事件？
结论：（同步/defer/async)均会阻塞onload事件。
代码(以defer为例)：
{{flush 1000}}
Hello World
时间线：
上面的两个小实验应证的是规范中的：Spin the event loop until the set of scripts that will execute as soon as possible and the list of scripts that will execute in order as soon as possible are empty.
疑问三：如果在domContentLoaded时动态插入CSS/图片/iframe，会阻塞onload事件吗？
结论：会阻塞。动态插入的图片/CSS会阻塞onload事件，iframe不会。
代码（以image为例）：
{{flush 1000}}
Hello World
结果：
【更多待补充...】
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85413.html
摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。 页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....
摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。 页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....
摘要：事件虽然不支持，但它支持事件，该事件的目的是提供与文档或元素的加载状态有关的信息。事件可以用于检测是否加载完毕，当时，表示加载完成。封装事件以下，是封装事件从而达到良好的兼容性的一个简单的代码实现。 我们在开发时，经常需要检测页面是否加载完毕，以确保脚本安全运行，下面我们就来浅谈一下检测页面是否加载完毕的那些事件们。 1. onload 事件 在页面的所有资源加载完成时，window对...
摘要：事件虽然不支持，但它支持事件，该事件的目的是提供与文档或元素的加载状态有关的信息。事件可以用于检测是否加载完毕，当时，表示加载完成。封装事件以下，是封装事件从而达到良好的兼容性的一个简单的代码实现。 我们在开发时，经常需要检测页面是否加载完毕，以确保脚本安全运行，下面我们就来浅谈一下检测页面是否加载完毕的那些事件们。 1. onload 事件 在页面的所有资源加载完成时，window对...
摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展 开车...
摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接：https://github.com/zwwill/blo... 围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展 开车...
阅读 2634·2021-11-24 09:38
阅读 3399·2021-11-23 09:51
阅读 710·2021-09-09 11:52
阅读 3900·2021-08-11 11:18
阅读 976·2019-08-30 14:05
阅读 3086·2019-08-30 11:23
阅读 1619·2019-08-29 17:02
阅读 1003·2019-08-26 13:49
