CSS加载是否阻塞DOMContentLoaded事件触发

背景

昨天工作时遇见一个问题，问题是要求在页面渲染出图像之前删除一个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加载会不会造成文档解析阻塞？有兴趣的同学可以阅读。

总结

由此可见遇见问题多看标准，😄 网上结论要通过自己测试总结，因为文章也有很多内容是推测的并非事实，真理总在自己手中。希望本门对大家有所帮助。
行文仓促，如有问题，还望指出。🙏

CSS加载是否阻塞DOMContentLoaded事件触发

背景

DOMContentLoaded事件

问题

总结

推荐阅读更多精彩内容