上一篇文章我们介绍了DOM的概念，以及JavaScript是如何阻塞DOM生成的，今天我们继续探究CSS的工作原理，以及对页面渲染的影响
结合下面的代码看一下渲染流程：
//theme.css div { color: green; background-color: #000; }html片段：
<html> <head> <link href="theme.css" rel="stylesheet"> </head> <body> <div>some text</div> </body> </html>这段代码的渲染如下示意图所示:
首先发起主页面的请求，发送的请求被送到网络进程中去执行，网络进程接收到数据之后发送给渲染进程，渲染进程开始解析html并构建DOM，请求html到渲染DOM中间有空闲时间，这里是发起请求的事件。请求渲染进程接受HTML文件字节流时，会先开启一个预解析线程，如果遇到JavaScript或者CSS文件，那么会先下载这些数据，这段代码里会先下载css文件，下载的过程中，渲染进程处于空闲状态
渲染进程无法直接识别CSS，需要先将其解析成渲染引擎能够识别的CSSDOM，CSSDOM可以被JavaScript操作，也可以为布局树的合成提供基础的样式表。
当有了DOM和CSSDOM，渲染引擎就可以开始合成DOM树了，DOM树会将不需要显示的标签过滤掉，如html，head，display为none的，有了布局树之后，开始对DOM进行样式计算，然后是位置计算， 然后就可以进行绘制操作了。
上面例子是一个只有CSS的，下面看一个中间有JavaScript脚本的
//theme.css div { color: green; background-color: #000; } <html> <head> <link href="theme.css" rel="stylesheet"> </head> <body> <div>geekbang com</div> <script> console.log('time.geekbang.org') </script> <div>geekbang com</div> </body> </html>这个例子中，除了CSS样式之外，还有JavaScript脚本，其绘制流程如下:
上一篇文章中我们说了，如果外部文件有CSS样式表，又有JavaScript脚本，那么会优先执行JavaScript脚本，因为JavaScript脚本可能会修改当前状态下的DOM。
渲染流水线影响了首次页面展示的速度，那么有什么方法可以提高首页的渲染速度呢？
通常情况下，页面显示的瓶颈主要有下载CSS文件，下载JavaScript文件，执行JavaScript脚本
所以内联样式会比外部引入CSS文件渲染更快
JavaScript文件的引入可以使用defer关键字
自适应的css样式采用媒体查询的方式会处理的更快
