道招

《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析

如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！

《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析

当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了。

  • 我们先看第一种情况在解析过程中，如果遇到了JS脚本，如下所示：

    <html>
<body>
    极客时间
    <script>
    document.write("--foo")
    </script>
</body>
</html>

    那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。

  • 第二种情况复杂点了，上述解析过程中内联的JS脚本替换成JS外部文件，如下所示：

    <html>
<body>
    极客时间
    <script type="text/javascript" src="foo.js"></script>
</body>
</html>

    这种情况下，当解析到JavaScript的时候，会先暂停DOM解析，并下载foo.js文件，下载完成之后执行该段JS文件，然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。

  • 再看第三种情况，还是看下面代码：

    <html>
<head>
    <style type="text/css" src = "theme.css" />
</head>
<body>
    <p>极客时间</p>
    <script>
        let e = document.getElementsByTagName('p')[0]
        e.style.color = 'blue'
    </script>
</body>
</html>

    当我在JavaScript中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析。

所以JS和CSS都有可能会阻塞DOM解析。

本文截取自《浏览器工作原理与实践》05 | 渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？

更新时间：
上一篇：下一篇：

相关文章

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网，分享IT资讯，前沿科技、编程技术，是否允许文章更新后推送通知消息。
允许
不用了