这是我参与「第四届青训营」笔记创作活动的第8天 渲染是浏览器的必经步骤，浏览器中的渲染的定义如下： 1、在构建CSSOM树时，会阻塞渲染，直至CSSOM树构建完成。并且构建CSSOM树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的CSS选择器，执行速度越慢。 2、当HTML解析到script标签时，会暂停构建DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS文件。并且CSS也会影响JS的执行，只有当解析完样式表才会执行JS，所以也可以认为这种情况下CSS也会暂停构建DOM。

浏览器渲染网页可以细分为一下五个步骤：

1、解析HTML标签，构建DOM树

在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。

2、解析CSS，构建CSSOM树

CSSDOM树对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。

3、合并DOM、CSSOM成一个渲染树

渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。

4、根据渲染树来布局，计算每个节点的位置

布局：定位坐标和大小，是否换行等属性。

5、合成图层并调用GPU渲染

将渲染树的各个节点绘制到屏幕上，这一步一般称作绘制。

减轻CSSOM带来的影响： 1、将script脚本放在页面底部。 2、尽可能快的加载css样式表。 3、将样式表按照media type和media query区分，这样有助于我们将css资源标记成非阻塞渲染的资源。 4、非阻塞的资源还是会被浏览器下载，只是优先级较低。