阻塞渲染

css

CSS是一种渲染阻塞资源(render blocking resource)，它需要完全被解析完毕之后才能进入生成渲染树的环节。CSS并不像HTML那样能执行部分并显示，因为CSS具有继承属性， 后面定义的样式会覆盖或者修改前面的样式。如果我们只使用样式表中部分解析好的样式，我们可能会得到错误的页面效果。所以，我们只能等待CSS完全解析之后，才能进入关键渲染路径的下一环节。

需要注意的是，只有CSS文件适用于当前设备的时候，才能造成渲染阻塞。

标签<link rel=”stylesheet”>接受media属性，该属性规定了此处的CSS文件适用于哪种设备。如果我们有个设备属性值为orientation: landscape(横向)的样式，当我们竖着浏览页面的时候，这个CSS资源是不会起作用的，也就不会阻塞渲染的过程了。

【实际上，css也会阻塞渲染，就是说，html他需要等，等css全部搞好了之后，才能进入到两个树合并的过程，而且如果你的css哪一个写错了的话，那么这个css不会加载，从某种意义上来说，这个错误的css不会阻塞html的加载】

 

js

js脚本也会阻塞渲染，如果html构造dom树的时候，遇到script标签，或者外联的script标签

那么它都会暂时停下来去加载这些标签，并且执行.

script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。

JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。