您的当前位置：首页 JS、CSS以及img对DOMContentLoaded事件的影响_javascript技巧

JS、CSS以及img对DOMContentLoaded事件的影响_javascript技巧

来源：年旅网

规范总是那么的晦涩，但至少有一点是可以明确了的，就是在JS（不包括动态插入的JS）执行完之后，才会触发DOMContentLoaded事件。

接下来看看MDN上有关DOMContentLoaded事件的文档：

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading
Note: Stylesheet loads block script execution, so if you have a


图一
如果页面中没有script标签，DOMContentLoaded事件并没有等待CSS文件、图片加载完成。
Chrome开发者工具的Timeline面板可以帮我们记录下浏览器的一举一动。图一中红色小方框中的蓝线，表示DOMContentLoaded事件，它右边的红线和绿线分别表示load事件和First paint，鼠标hover在这些线露出灰色方框下面的一小部分时就会出现带有说明文字的tips（这交互够的对吧！）。
实验2：DOMContentLoaded事件需要等待JS执行完才触发
index.html: