JavaScript和CSS资源请求是并行的，但仍然需要等到CSSOM构建完成之后，JavaScript才可以执行，然后在进行后面的渲染工作。于是，当 DOM、CSSOM 和 JavaScript 执行之间有大量的依赖关系时，就很可能导致浏览器在处理及渲染网页时出现延迟。
优化策略
我们花了大量的篇幅来理解浏览器的渲染过程，理解DOM，CSSOM，渲染树，浏览器绘制，分析HTML，CSS和JS在渲染过程中的关系，我相信你已然受益匪浅，现在，我们来运用这些知识加速你的网站。
第一步，分析你的网站渲染状况
我们以Google为例，通过Chrome的Performance工具查看页面渲染情况，如下图，你应该可以清晰的看到图中有四条竖线，他们分别是什么含义呢？
绿色竖线，代表First Paint，即浏览器开始进行像素的绘制
黄色竖线，代表First Meaningful Paint（首次有效绘制）用户可以开始看到部分内容，但绘制仍在继续
蓝色竖线，代表大家比较熟悉的DOMContentLoaded
红色竖线，代表load，页面加载完成
优秀的网站都能够把“首次有效渲染”做到1秒之内完成，这样能够让用户更快的看到所请求的页面得到响应。如果你的网站“首次有效渲染”超过1秒，那么就非常有必要重新分析一下网站的关键渲染路径是否合理。
第二步，分析关键渲染路径
在关键渲染路径中，我们通常要关注三个点：
页面首次渲染需要的关键资源数量
关键资源的大小
关键渲染路径的往返次数（Roundtrip）
我们的策略也非常简单，就是减少关键资源数量，降低资源大小，减少关键路径的往返次数。
关键渲染的资源一般是阻止屏幕首次渲染HTML，CSS和JavaScript，所以最重要也是最难的部分的是你需要根据自己网站的实际情况分析，哪些是页面绘制的所必须的，哪些是无关的。
第三步，根据分析采取优化手段
1、减少关键资源的大小
我们首先从最简单也是最直接的减少关键资源的大小开始：
对于所有的资源（HTML，JavaScript，CSS，Image等），你都应该用上三大绝招：Minify，Compression和Cache，这里不过多的赘述里面的细节。
这一点对于HTML来说，非常关键，HTML作为渲染的关键资源，消除或者延迟加载肯定不太可能(这里指的是非局部渲染的关键HTML)，能够做到是消除无用代码（比如：注释）和最小化代码（Minify）以及动态局部渲染等。