[TOC]

web.dev

如果下载CSS文件阻塞了,会阻塞DOM树的合成吗?会阻塞页面的显示吗？

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

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

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

当解析到javascript的时候,会先暂停DOM解析,并下载foo.js文件,下载完成之后执行该阶段js文件,然后再继续往下解析dom树。这就是js文件为什么阻塞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的解析。

defer

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在