浏览器渲染

从输入URL到导航过程完成之后，浏览器进程把数据交给了渲染进程，渲染进程负责tab内的所有事情，核心目的就是将HTML/CSS/JS代码，转化为用户可进行交互的web页面。

渲染进程中，包含线程分别是：

• 一个主线程（main thread）
• 多个工作线程（work thread）
• 一个合成器线程（compositor thread）
• 多个光栅化线程（raster thread）

1、浏览器内核对内容渲染的大体步骤：

1. 解析html建立DOM树，解析css建立CSSOM树；
2. 结合DOM树和CSSOM树，构建render树；
3. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算；
4. 绘制render树（paint），绘制页面像素信息；
5. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上；

浏览器渲染的目标区域，为标签栏下方区域即content。整个渲染过程我们的输入是前端的代码，输出是content区域的像素点。

为了构建渲染树，浏览器主要完成了以下工作：

1. 从DOM树的根节点开始遍历每个可见节点。
2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
3. 根据每个可见节点以及其对应的样式，组合生成渲染树。

第一步中说到了要遍历可见的节点，不可见的节点包括：

• 一些不会渲染输出的节点，比如script、meta、link等。
• 一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

2、css加载是否会阻塞dom树渲染？

css是由单独的下载线程异步下载的，头部引入css的情况下：

• css加载不会阻塞DOM树解析（异步加载时DOM照常构建）；
• 但会阻塞render树渲染（渲染时需等css加载完毕，因为render树需要css信息）；

为什么会阻塞渲染树？因为如果不阻塞的话，渲染树渲染之后又要重新渲染CSS的样式，所以干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后，再根据最终的样式来渲染render树。

media query除外，不会阻塞渲染

3、CSS定位机制

在CSS中是有三种定位机制的：普通文档流、浮动和定位。

普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。一旦给其中的某个div设置float或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间。

定位中，fixed和absolute定位会脱离文档流，元素原来的位置会被覆盖，而relative定位则不会脱离文档流，元素原来的位置还保留。浮动也会脱离文档流。

4、普通图层和复合图层

浏览器渲染的图层一般包含两大类：普通图层（渲染图层）以及复合图层；

渲染图层：是页面普通文档流。无论添加多少元素，还在在同一个默认复合层。虽然绝对定位（absolute），相对定位（fixed），浮动定位（float）会让元素成为脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。

复合图层：又称图形层，它会单独分配系统资源，每个复合图层都有一个独立的GraphicsContext。（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流Reflow重绘Repaint）。

通过硬件加速就可以使渲染图层提升为复合图层，在GPU中，各个复合图层单独绘制，故互不影响。动画借助复合层，只渲染自己所在的复合层，而不影响其他复合层。从而提升性能。

如何变成复合图层：将元素变成一个复合图层，就是开启硬件加速技术

• 最常用的方式：translate3d、translateZ；
• opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）；
• will-chang属性（这个比较偏僻），一般配合opacity与translate使用；

作用是提前告诉浏览器要变化，这样浏览器会开始做一些优化工作（这个最好用完后就释放）