Accelerated Rendering in Chrome---The Layer Model

[zhuzhuaicoding]

笔记

• Chrome 拥有两套不同的渲染路径(rendering path)：硬件加速路径和旧软件路径(older software path)。
• RenderLayer(负责 DOM 子树)，GraphicsLayer(负责 RenderLayer 的子树)。只有 GraphicsLayer 是作为纹理(texture)上传给 GPU 的。
• 蓝色网格表示瓦片(tile)，你可以把它们当作是层的单元，Chrome 可以将它们作为一个大层的部分上传给 GPU。我们就能看到当元素拥有自己的层时是什么样子：注意橘黄色的边框，它画出了该视图中层的轮廓。

层创建标准

• 3D or perspective transform CSS properties
• elements with a 3D (WebGL) context or accelerated 2D context
• Composited plugins (i.e. Flash)
• Elements with CSS animation for their opacity or using an animated transform
• Elements with accelerated CSS filters
• Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer)
• Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)

实际意义

• 动画层
  层对于移动静态 web 内容十分有效。通常，Chrome 会将一个层的内容在作为纹理上传到 GPU 前先绘制(paint)进一个位图中。如果内容不会改变，那么就没有必要重绘(repaint)。这样处理很好：花在重绘上的时间可以用来做别的事情，例如运行 JavaScript，如果绘制的时间很长，还会造成动画的故障与延迟。
  层的内容变了的话，就需要repaint。
• 重绘层失效的部分。是什么原因导致失效(invalidation)进而强制重绘的呢？因为存在大量导致失效的边界情况。最常见的情况就是通过操作 CSS 样式来修改 DOM 或导致重排。

从 DOM 到屏幕

So how does Chrome turn the DOM into a screen image? Conceptually, it:

1. Takes the DOM and splits it up into layers
2. Paints each of these layers independently into software bitmaps
3. Uploads them to the GPU as textures
4. Composites the various layers together into the final screen image.

注意

1. 层本身会占内存和GPU内存，记录层的状态带来的额外开销
2. 过多会导致过度渲染，增加栅格化的时间

---

ref：https://www.html5rocks.com/en/tutorials/speed/layers/

[zhuzhuaicoding]

导致layout

Element

clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

Frame, Image

height, width

Range

getBoundingClientRect(), getClientRects()

SVGLocatable

computeCTM(), getBBox()

SVGTextContent

getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

SVGUse

instanceRoot

window

getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

[zhuzhuaicoding]

Timeline Event Reference

Rendering events

This section lists events that belong to Rendering category and their properties.

Event	Description
Invalidate layout	The page layout was invalidated by a DOM change.
Layout	A page layout was executed.
Recalculate style	Chrome recalculated element styles.
Scroll	The content of nested view was scrolled.