Carding browser rendering process
First, a quick look at the browser request, loading, rendering the general process of a page:
- DNS lookup
- TCP connection
- I.e., in response to the HTTP request
- Server response
- Client side rendering
Here the main client rendering launched comb, get the content (rendering thread receives the request, the page load and render pages), rendering probably can be divided into the following steps from the browser kernel:
- Html parsing dom tree establishment
- Construction render css parsing tree (the CSS code is parsed into a tree data structure, and then combined into a combined render DOM tree)
- Tree render layout (Layout / reflow), responsible for calculating the size of each element, the position of
- Draw render tree (paint), draw pixel information page
- Browser will send a message to the layers of GPU (GPU process: at most one for 3D rendering, etc.), GPU will be layers of synthetic (composite), displayed on the screen.
Reference to a map (webkit rendering main process):
Here to explain a few concepts, to facilitate understanding:
DOM Tree: browser parses the HTML into a tree data structure.
CSS Rule Tree: CSS browser will parse the data into a tree structure.
Render Tree: generating the combined DOM Render Tree and CSSOM.
layout: With the Render Tree, the browser has to know which node pages, CSS definitions of each node as well as their affiliation, thereby to calculate the position of each node in the screen.
painting: according to the rules worked out by the graphics card, the contents drawn on the screen.
reflow (reflow): When the browser find a section there was a bit changes affect the layout, you need to go back and re-rendering, experts say the rollback process is called reflow. will reflow <html> recursion starts from the root frame down, all the nodes sequentially calculated geometry and position. reflow is almost inevitable. Now popular on the screen some of the effects, such as folding tree, expand (essentially show elements and hidden), etc., will cause reflow browser. Mouse over, click on ...... as long as these acts caused a change in the properties of certain elements of the footprint, positioning way, margins and other page, it will cause internal, and even around the re-rendering the entire page. Usually we are unable to estimate the browser in the end what part of the code will reflow, they all affect each other.
repaint (redraw): change the background color of an element, text color, border color, and so when it does not affect the layout of the property around or inside, part of the screen to be redrawn, but the geometry of the elements has not changed.
note:
- display: none of the nodes will not be added to Render Tree, and visibility: hidden
will, therefore, if a node is not the beginning of the show, set to display: none is better. - display: none will trigger reflow, and visibility: hidden will only trigger repaint, because found no change in position.
- In some cases, such as modifying the style elements, the browser does not reflow immediately or repaint once, but will accumulate a number of such operations, and then do a reflow, which is also called asynchronous reflow or incremental asynchronous reflow. However, in some cases, such as resize the window, change the default page of fonts. For these operations, the browser will immediately be reflow.
Referring again to look at a map to understand:
Careful separation of the two links, the other aspects of the concept described above with reference notes:
JavaScript: JavaScript to achieve animation, DOM element operation. Composite（渲染层合并）: DOM elements on the page rendering is performed on a plurality of layers. After completion of the drawing process on each of the layers, the browser will all layers were in the proper sequence into a layer, and then displayed on the screen. For the position of page elements overlap, this process is particularly important, because once the order of the layers merge error, will cause abnormal display elements.
In practical scenarios, there will be roughly three common rendering process (Layout and Paint step are avoidable, attention may be understood with reference to the portion of a map):
Composite
Learn layer
Note: First, this discussion is WebKit, describes the implementation details of Chrome, but not the web platform features, so the content presented here does not necessarily apply to other browsers.
- Chrome has two different rendering paths (rendering path): hardware acceleration path and the old path software (older software path)
- Chrome There are different types of layers: RenderLayer (responsible DOM sub-tree) and GraphicsLayer (responsible for the sub-tree RenderLayer), is only GraphicsLayer as a texture (texture) uploaded to the GPU.
- What is the texture? It can be thought to move from a main memory (e.g., RAM) to the image memory (VRAM GPU in e.g.) a bitmap image (BitmapImage)
- Chrome texture to get the page content chunks from the GPU. By applying texture to a very simple rectangular grid can easily match the different positions (position) and deformation (transformation). This is the working principle 3DCSS, and it is also very effective for fast scrolling.
The whole picture:
In fact, there are several different types of layers in Chrome:
- RenderLayers rendering layer, which is responsible for the corresponding DOM sub-tree
- GraphicsLayers graphics layer, which is responsible for the corresponding RenderLayers sub-tree.
在浏览器渲染流程中提到了composite概念，在 DOM 树中每个节点都会对应一个 LayoutObject，当他们的 LayoutObject 处于相同的坐标空间时，就会形成一个 RenderLayers ，也就是渲染层。RenderLayers 来保证页面元素以正确的顺序合成，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。
某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。
而每个GraphicsLayer（合成层单独拥有的图层） 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后显示到屏幕上。
如何变成合成层
合成层创建标准
什么情况下能使元素获得自己的层？虽然 Chrome的启发式方法(heuristic)随着时间在不断发展进步，但是从目前来说，满足以下任意情况便会创建层：
- 3D 或透视变换(perspective transform) CSS 属性
- 使用加速视频解码的 <video> 元素 拥有 3D
- (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
- 混合插件(如 Flash)
- 对自己的 opacity 做 CSS动画或使用一个动画变换的元素
- 拥有加速 CSS 过滤器的元素
- 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
- 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
合成层的优点
淘宝的栗子举的很详细，值得一看，里面提到了一旦renderLayer提升为了合成层就会有自己的绘图上下文，并且会开启硬件加速，有利于性能提升,里面列举了一些特点
- 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
- 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
- 对于 transform 和 opacity 效果，不会触发 layout 和 paint
注意：
- 提升到合成层后合成层的位图会交GPU处理，但请注意，仅仅只是合成的处理（把绘图上下文的位图输出进行组合）需要用到GPU，生成合成层的位图处理（绘图上下文的工作）是需要CPU。
- 当需要repaint的时候可以只repaint本身，不影响其他层，但是paint之前还有style， layout,那就意味着即使合成层只是repaint了自己，但style和layout本身就很占用时间。
- 仅仅是transform和opacity不会引发layout 和paint，那么其他的属性不确定。
总结合成层的优势：一般一个元素开启硬件加速后会变成合成层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。
性能优化点：
- 提升动画效果的元素 合成层的好处是不会影响到其他元素的绘制，因此，为了减少动画元素对其他元素的影响，从而减少paint，我们需要把动画效果中的元素提升为合成层。
提升合成层的最好方式是使用 CSS 的 will-change属性。从上一节合成层产生原因中，可以知道 will-change 设置为opacity、transform、top、left、bottom、right 可以将元素提升为合成层。 - 使用 transform 或者 opacity 来实现动画效果, 这样只需要做合成层的合并就好了。
- 减少绘制区域 对于不需要重新绘制的区域应尽量避免绘制，以减少绘制区域，比如一个 fix 在页面顶部的固定不变的导航header，在页面内容某个区域 repaint 时，整个屏幕包括 fix 的 header 也会被重绘。
而对于固定不变的区域，我们期望其并不会被重绘，因此可以通过之前的方法，将其提升为独立的合成层。减少绘制区域，需要仔细分析页面，区分绘制区域，减少重绘区域甚至避免重绘。
利用合成层可能踩到的坑
- 合成层占用内存的问题
- 层爆炸，由于某些原因可能导致产生大量不在预期内的合成层，虽然有浏览器的层压缩机制，但是也有很多无法进行压缩的情况，这就可能出现层爆炸的现象（简单理解就是，很多不需要提升为合成层的元素因为某些不当操作成为了合成层）。解决层爆炸的问题，最佳方案是打破 overlap 的条件，也就是说让其他元素不要和合成层元素重叠。简单直接的方式：
使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰合成的排序，可以有效减少chrome创建不必要的合成层，提升渲染性能，移动端优化效果尤为明显。在这篇文章中的demo可以看出其中厉害。
用chremo打开demo页面后，开启浏览器的开发者模式，再按照如图操作打开查看工具：
开启 Rendering 的Layer borders后 观察点击为动画元素设置z-index复选框的页面提示变化：
上图中可以明显看出：页面中设置了一个h1标题，应用了translate3d动画，使得它被放到composited layer中渲染，然后在这个元素后面创建了2000个list。在不为h1元素设置z-index的情况下，使得本不需要提升到合成层的ul元素下的每个li元素都提升为一个单独合成层（每个li元素的黄色提示边框），最终会导致GPU资源过度消耗页面滑动时很卡，尤其在移动端（安卓）上更加明显。
如上图操作选中为动画元素设置z-index，可以看出ul下的每个li都回归到普通渲染层，不再是合成层也就不会消耗GPU资源去渲染，从而达到了优化页面性能优化的目的。
大家可以用支持『硬件加速』的『安卓』手机浏览器测试上述页面，给动画元素加z-index前后的性能差距非常明显。
最后
Especially mobile-side development in the actual front-end development, many small partners are like using a similar translateZ (0) attributes to the so-called hardware acceleration to improve performance and achieve the purpose of optimizing pages dynamic effects, but still have to pay attention to everything too far, the application hardware acceleration Note also that do not step on the pit.
About synthetic layer is more specific and detailed explanation, reference can learn under the following article carefully (especially the first three oh).
Finally, I wish you love technology always adhere to the road to explore the technology furiously!
Reference article:
Wireless performance optimization: Composite
the DOM to Screen
CSS GPU Animation: Doing It Right
Web optimization of composite
dwell layer synthetic (composite)
CSS3 hardware acceleration pit