背景
昨天工作时遇见一个问题，问题是要求在页面渲染出图像之前删除一个dom节点，但是由于一开始绑定在window.load的事件上，这会造成页面上dom节点的一闪而过，这对用户的影响是有的，那么如何才能在渲染出图像之前将dom节点删除呢？😔 DOMContentLoaded就可以做到，因此下文就是对DOMContentLoaded事件的学习与理解。
DOMContentLoaded事件
当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。(MDN)
问题
上述是MDN的官方说法，但是我们在网络上又经常看见另外一套说法，如该文章：
DOM文档加载的步骤为
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。//DOMContentLoaded
加载图片等外部文件。
页面加载完毕。//load
在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。
通过对比文章内容，对图片加载，子框架加载，以及DomContentLoad事件的触发时机并无异议，那么CSS样式表是否必须加载完成之后才会触发DOMContentLoaded呢？网上的说法貌似是需要加载完成才能触发，但是MDN给出的说法则是不需要等待样式表，那么我们自己写代码测试一下吧。😄
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.addEventListener('DOMContentLoaded',function(){
var obj = document.getElementsByClassName('divToTest')[0];
console.log(obj);
obj.parentElement.removeChild(obj);
})
</script>
<link rel="stylesheet" type="text/css" href="css/CSS_loadingSequence2.css" />
</head>
<body>
<div class="divToTest">
</div>
</body>
</html>
css/css_loadingSequence2.css
.divToTest{
width: 300px;
height: 300px;
background: green;
}
然后设置chrome的网络状态：
设置为slow 3G，以方便我们观察加载过程
准备就绪接下来就是运行啦：
可以看到此时css还未加载完毕就已经输出了Dom元素
到达2.06秒时页面才成功渲染
由上述测试可见DOMContentLoaded无需等待CSS样式表的加载就会执行。
其实这个问题更往下分析就是CSS样式表加载是否阻塞HTML的解析，结论是：CSS样式的加载不阻塞HTML的解析，而CSS的执行会阻塞解析。推荐一篇文章css加载会不会造成文档解析阻塞？有兴趣的同学可以阅读。
总结
由此可见遇见问题多看标准，😄 网上结论要通过自己测试总结，因为文章也有很多内容是推测的并非事实，真理总在自己手中。希望本门对大家有所帮助。
行文仓促，如有问题，还望指出。🙏
网友评论