按照渲染的时间顺序，可分为以下几个阶段：构建DOM树、样式计算、布局阶段、分层、绘制、光栅化和合成。

    • 浏览器不能直接理解HTML数据，所以第一步是需要将其转化为浏览器能够理解的DOM树结构。
    • 生成DOM树之后，还有根据CSS样式表，来计算出DOM树所有节点的样式。
    • 最后计算DOM元素的布局信息，使其都保存在布局树中。

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

    在我自己理解的是，不会阻塞DOM树的合成，因为在DOM树合成之后才会根据DOM树计算其所有节点的样式。而且我们经常看见css文件加载不出来，就会显示出没有样式的页面。但是事实好像没有那么简单。

    以下的内容是作者的回答，真的我是第一次发现评论区会有答案，之前一直以为文后的问题是让我们思考用的。

    第一种情况
    当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了，在解析过程中，如果遇到了JS脚本，如下所示：

    1. <html>
    2.     <body>
    3.         极客时间
    4.         <script>
    5.         document.write("--foo")
    6.         </script>
    7.     </body>
    8. </html>

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

    那么第二种情况复杂点了，我们内联的脚本替换成js外部文件，如下所示：

    1. <html>
    2.     <body>
    3.         极客时间
    4.         <script type="text/javascript" src="foo.js"></script>
    5.     </body>
    6. </html>

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

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

    1. <html>
    2.     <head>
    3.         <style type="text/css" src = "theme.css" />
    4.     </head>
    5.     <body>
    6.         <p>极客时间</p>
    7.         <script>
    8.             let e = document.getElementsByTagName('p')[0]
    9.             e.style.color = 'blue'
    10.         </script>
    11.     </body>
    12. </html>

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