整理浏览器渲染过程首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程：DNS查询TCP连接HTTP请求是响应服务器响应客户端渲染这里我们主要展开梳理客户端渲染，从浏览器内核中获取内容（渲染线程接收请求，加载网页并渲染网页），渲染大致分为以下几个步骤：parsehtml,builddomtree,parsecss,buildrenderTree（将CSS代码解析成树状的数据结构，再与DOM结合形成渲染树）布局渲染树（Layout/reflow），负责计算每个元素的大小和位置绘制渲染树（paint），绘制页面像素信息浏览处理器会将每一层的信息发送给GPU（GPU进程：最多一个，用于3D绘图等）,GPU将合成每一层并将其显示在屏幕上。参考一张图（webkit渲染的主要流程）：这里先解释几个概念，方便大家理解： DOM树：浏览器将HTML解析成树状的数据结构。 CSSRuleTree：浏览器将CSS解析成一个树状的数据结构。 RenderTree：RenderTree是DOM和CSSOM合并后生成的。 layout：通过RenderTree，浏览器已经可以知道网页中有哪些节点，每个节点的CSS定义以及它们的从属关系，从而计算出每个节点在屏幕上的位置。 绘画：根据计算出的规则，通过显卡在屏幕上绘制内容。 reflow（回流）：当浏览器发现某个部分发生了变化，影响了布局，需要返回去重新渲染。专家称此回退过程为回流。reflow会递归地从根框架开始，依次计算所有节点的几何尺寸和位置。回流几乎是不可避免的。现在界面上流行的一些效果，比如树状目录的折叠和展开（本质上是显示和隐藏元素）等，都会导致浏览器回流。鼠标悬停、点击……这些行为只要引起页面上某些元素的占用区域、定位方式、边距等属性发生变化，就会引起其内部、周围乃至整个页面的重新渲染.通常我们无法预测浏览器会回流代码的哪一部分，它们相互影响。 repaint（重绘）：当改变一个元素的背景颜色、文字颜色、边框颜色等属性，但不影响其周围或内部布局时，需要重绘屏幕的一部分，但几何尺寸元素没有改变。注意：带有display:none的节点不会加入到RenderTree中，但是visibility:hidden会加入，所以如果一开始没有显示的节点，最好设置display:none。display:none会触发重排，而visibility:hidden只会触发重绘，因为没有检测到位置变化。在某些情况下，比如修改一个元素的样式，浏览器不会立即回流或重绘一次，而是会批量累积这样的操作，然后进行一次回流，也称为异步回流或增量异步回流。但在某些情况下，比如调整窗口大小，更改页面默认字体等，对于这些操作，浏览器会立即回流。再次参考一张图理解：小心分开两个链接，其他链接参考上面概念说明：JavaScript：JavaScript实现动画效果，DOM元素操作等Composite（渲染层合并）：DOM元素的绘制在页面中是在多个图层上执行的。在完成每一层的绘制过程后，浏览器将所有层按逻辑顺序组合成一层显示在屏幕上。这个过程对于有重叠元素的页面尤为重要，因为一旦图层合并顺序错误，元素就会显示异常。在实际场景中，一般有三种常见的渲染流程（Layout和Paint步骤是可以避免的，请参考上图注意部分理解）：Compositeunderstandinglayer注意：首先，这里讨论的是WebKit，DescribesChrome的实现细节，而不是网络平台的功能，因此此处描述的内容不一定适用于其他浏览器。Chrome有两组不同的渲染路径：硬件加速路径和旧的软件路径。Chrome中有不同类型的层：RenderLayer（负责DOM子树）和GraphicsLayer（负责RenderLayer的子树），只有GraphicsLayer作为纹理上传到GPU。什么是纹理？可以把它想象成一个位图图像（bitmapimage）从主内存（例如RAM）移动到图像内存（例如GPU中的VRAM）。Chrome使用纹理从GPU获取页面内容块。通过将纹理应用于非常简单的矩形网格，可以轻松匹配不同的位置和变换。这就是3DCSS的工作原理，它也适用于快速滚动。整体图：Chrome中其实有几种不同的图层类型：RenderLayers渲染层，负责相应的DOM子树GraphicsLayers图形层，负责相应的RenderLayers子树。在浏览器渲染过程中提到复合概念。DOM树中的每个节点都对应一个LayoutObject。当它们的LayoutObjects在同一个坐标空间时，就形成了一个RenderLayers，这就是渲染层。RenderLayers用于确保页面元素以正确的顺序合成。这时候就会出现图层合成（composite）来正确处理透明元素和重叠元素的显示。一些特殊的渲染层被认为是合成层（CompositingLayers）。合成层有一个单独的GraphicsLayer，而其他不是合成层的渲染层与其第一个父层共享一个GraphicsLayer。而每个GraphicsLayer（合成层单独拥有的层）都有一个GraphicsContext，它将负责输出该层的位图。位图存储在共享内存中，并作为纹理上传到GPU。最后，GPU将多个位图合成，然后显示在屏幕上。如何成为合成层合成层创建标准一个元素什么时候可以得到自己的层？虽然Chrome的启发式方法随着时间的推移而发展，但截至目前，如果满足以下任一条件，则会创建一个图层：3D或透视变换CSS属性使用
