Front-End Performance Optimization With Accelerated Compositing — Part 1

The presentation of a web page typically involves the following steps:

1. JavaScript: The use of JavaScript is to achieve visual changes. For example, to add an animation or DOM elements.
2. Style: Matches each DOM element with the corresponding CSS style based on the CSS selector. After this step, the CSS style rule for each DOM element gets determined.
3. Layout: Calculates the size and position of each DOM element to be displayed on the screen. The layout of elements on a Web page is relative, which means a single element can affect others. For example, in case there is a change in the width of the element, the widths of its child and grandchild elements get affected. Therefore, the layout process often gets involved for the browser.
4. Paint: Essentially, painting is the process of filling in pixels. It requires painting of text, colors, images, borders, shadows, and other visual effects of a DOM element. In general, the painting gets completed in multiple layers.
5. Composite: As mentioned above, the painting of DOM elements gets done at numerous layers on the page. Once it is complete, the browser combines all the layers into one layer in a correct order and displays them on the screen. This process is especially important for pages with overlapping elements as the incorrect layer composition order may result in an abnormal display of the elements.

This article will only focus on the "Composite" stage of web development.

Browser Rendering

The following section briefly describes the rendering principles of browsers (Use of Chrome is in the form of an example in this document) before introducing compositing to facilitate understanding of concepts. For more information, see GPU Accelerated Compositing in Chrome.

NOTE: As Chrome has modified some implementations of the Blank engine, there is a change in many known class names. For example, replacing RenderObject with LayoutObject and RenderLayer with PaintLayer. For more information, see Slimming Paint.

The browser stores the content of a page as a tree consisting of Node objects called the DOM tree. There is an association of each HTML element with a Node object. Similarly, the root node of the DOM tree is always a Document Node. Everyone knows this. However, there is a requirement for the conversion mapping from the DOM tree to the final rendering.

From Nodes to LayoutObjects

Each Node in the DOM tree has a corresponding LayoutObject, which knows how to paint the Node content on the screen.

From LayoutObjects to PaintLayers

Generally, LayoutObjects with the same coordinate space belong to the same PaintLayer. The original use of PaintLayer was stacking context to ensure that page elements are composite in the correct order so that overlapping and semi-transparent elements can be correctly displayed. Therefore, the creation of PaintLayer must be for LayoutObjects that meet the stacking context conditions and for special LayoutObjects in special cases, such as elements of overflow != visible. The following is the classification of the PaintLayers into three types based on the creation reasons:

1. NormalPaintLayer:
   1. It is the root element (HTML).
   2. Has the explicit positioning attribute (relative, fixed, sticky, or absolute).
   3. It is transparent (opacity smaller than 1).
   4. Has the CSS filter.
   5. Has the CSS mask attribute.
   6. Has the CSS mix-blend-mode attribute (not normal).
   7. Has the CSS transform attribute (not none).
   8. The backface-visibility attribute is hidden.
   9. Has the CSS reflection attribute.
   10. Has the CSS column-count attribute (not auto) or CSS column-width attribute (not auto).
   11. Application of animations is into opacity, transform, filter, and backdrop-filter.
2. OverflowClipPaintLayer: The overflow is not visible.
3. NoPaintLayer: It is the PaintLayer without painting, for example, an empty div without the visual attribute (background, color, or shadow).

A LayoutObject meeting the above conditions have a separated PaintLayer, while other LayoutObjects share the PaintLayer with the first parent element that owns the PaintLayer.

From PaintLayers to GraphicsLayers

Some special PaintLayers are considerable as Compositing Layers. A Compositing Layer has its own GraphicsLayer, and other PaintLayers that are not Compositing Layers share the GraphicsLayer with the first parent layer that owns the GraphicsLayer.

Each GraphicsLayer has a GraphicsContext, which outputs the bitmap of the layer. The shared memory stores the bitmap which gets uploaded to the GPU as a texture. Then, the GPU combines multiple bitmaps and draws them on the screen. In this case, the page gets displayed on the screen.

Upgrading PaintLayer to a Compositing Layer occurs due to the following reasons:

NOTE: To upgrade a PaintLayer to a Compositing Layer, the PaintLayer must be a SelfPaintingLayer (which can get considered as the above mentioned NormalPaintLayer). In the following cases, all upgraded PaintLayers are SelfPaintingLayers.

Direct Reasons

1. Hardware-accelerated iframe element (for example, an iframe-embedded page contains a Compositing Layer) (Demo)
2. Video element
3. Video control bar covering the video element
4. 3D or hardware-accelerated 2D canvas element
5. Demo: Normal 2D canvas not upgraded to a Compositing Layer
6. Demo: 3D canvas enhanced to a Compositing Layer
7. Hardware-accelerated plug-in, such as flash
8. On a screen with the high DPI, fixed elements get automatically upgraded to the Compositing Layer. However, this is not applicable to devices with the low DPI because the PaintLayer upgrade changes the font rendering mode from sub-pixel to gray-scale. (For more information, see Text Rendering.)
9. 3D transform exists.
10. The backface-visibility attribute is hidden.
11. Application of animation or transition is into opacity, transform, filter, or backdrop-filter. (The animation or transition must be active. If the effect is not started or is finished, upgrade to the Compositing Layer fails.)
12. Demo: Animation
13. Demo: Transition

Will-change is set to opacity, transform, top, left, bottom, or right. (If will-change is set to top or left, the positioning attribute must be clarified, such as relative.) (Demo)

Descendant Element Reasons

1. The layer has the descendant of the Compositing Layer and has the transform, opacity (smaller than 1), mask, filter, and reflection attributes. (Demo)
2. The layer has the descendant of the Compositing Layer, and its overflow is not visible. (If the explicit positioning factor generates the SelfPaintingLayer, z-index cannot be auto.) (Demo)
3. The layer has the descendant of the Compositing Layer and is fixed. (Demo)
4. The layer has the descendant of the Compositing Layer with the 3D transform attribute and has the preserved 3D attribute. (Demo)
5. The layer has the descendant of the Compositing Layer with the 3D transform attribute and has the perspective attribute. (Demo)

Overlap Reasons

Why does overlap generate a Compositing Layer? The following is a simple example.

As shown in the preceding figure, the blue rectangle overlaps the green one, and their parent element is a GraphicsLayer. Assume that the green rectangle is a GraphicsLayer. If it cannot be upgraded to a Compositing Layer by overlap, the blue rectangle does not upgrade to a Compositing Layer. The blue rectangle shares the GraphicsLayer with its parent element.

In this case, the rendering order is incorrect. Overlap becomes one of the reasons for generating the Compositing Layer to ensure the correct rendering order. The following figure shows the right order.

The overlap has the following situations:

1. Two layers overlap or partially overlap a Compositing Layer.
2. How layers overlap? The most common and understandable way is the overlap between the border box (content+padding+border) of the element and the Compositing Layer. Example: demo. Undoubtedly, the overlap of the margin area is invalid (demo). The following uncommon situations can get considered as the overlap with the Compositing Layer:
3. An overlap between the filter element and the Compositing Layer (Demo)
4. An overlap between the transformed element and the Compositing Layer (demo)
5. An overlap between the element whose overflow attribute is scroll and the Compositing Layer, i.e., if an element whose overflow attribute is scroll (whether overflow: auto or overflow: scroll overlaps a Compositing Layer, its visual sub-elements also overlap the Compositing Layer. (Demo)
6. assumedOverlap at a Compositing Layer.

However, this seems confusing. What is assumedOverlap? It is easy to understand. For example, if an element has a CSS animation effect. During animating, the element may overlap other elements. In this case, assumedOverlap gets generated. Example: Demo. In this demo, the animated element does not visually overlap its brother element. However, due to assumedOverlap, the brother element is upgraded to the Compositing Layer.

Note the following particular case of this reason: If the Compositing Layer has the inline transform attribute, assumedOverlap occurs for the brother PaintLayer, which gets upgraded to the Compositing Layer. Example: Demo.

Layer Squashing

The preceding are common reasons for upgrading a layer to a Compositing Layer. However, due to the overlap, a large number of Compositing Layers may be randomly generated, which consume CPU and memory resources and may seriously affect the page performance. The browser has considered this problem and implemented layer squashing. If multiple PaintLayers overlap the same Compositing Layer, the PaintLayers are squashed into a GraphicsLayer to avoid the "layer explosion" due to the overlap. See the following demo. The blue square is upgraded to a Compositing Layer by translateZ, and other overlapping squares get squashed. The squashed element size is the total size of the three squares.

When the green square hovers, it sets its translateZ attribute. In this case, the green square gets upgraded to a Compositing Layer, and the other two squares get squashed. The squashed element size is the total size of the two squares.

Of course, the browser is unable to automatically detect squash layers in many particular scenarios, as shown below. Such scenarios are avoidable. (NOTE: Overlap is the basis of the following scenarios.)

Squashing that may break the rendering order is not allowed (squashingWouldBreakPaintOrder). Example: Demo.

<style>
#ancestor {
  -webkit-mask-image: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
}

#composited {
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}

#container {
  position: relative;
  width: 400px;
  height: 60px;
  border: 1px solid black;
}

#overlap-child {
  position: absolute;
  left: 0;
  top: 0 ;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: orange;
}
</style>

<div id="container">
<div id="composited">Text behind the orange box.</div>
<div id="ancestor">
  <div id="overlap-child"></div>
</div>
</div>

In this example, #overlap-child overlaps the Compositing Layer. If it is squashed, the rendering order changes and the mask attribute of the parent element #ancestor is invalid. Therefore, layer squashing is not applicable. Currently, this scenario often occurs when the preceding ancestor element uses the master or filter attribute. (Demo) The PaintLayer of the video element cannot be squashed or squash other PaintLayers to the Compositing Layer of the video (squashingVideoIsDisallowed). (Demo)

The PaintLayer of the iframe or plug-in cannot be squashed or squash other PaintLayers to the Compositing Layer of the iframe or plug-in (squashingLayoutPartIsDisallowed). (Demo)

The PaintLayer with the reflection attribute cannot be squashed (squashingReflectionDisallowed). (Demo)

The PaintLayer with the blend mode attribute cannot be squashed (squashingBlendingDisallowed). (Demo)

When the PaintLayer and Compositing Layer have different clipping containers, the PaintLayer cannot be squashed (squashingClippingContainerMismatch). Example: (Demo)

<style>
.clipping-container {

  overflow: hidden;
  height: 10px; 
  background-color: blue;
}

.composited {

  transform: translateZ(0); 
  height: 10px; 
  background-color: red;
}

.target {

  position:absolute; 
  top: 0px; 
  height:100px; 
  width:100px; 
  background-color: green;
  color: #fff;
}
</style>

<div class="clipping-container">
<div class="composited"></div>
</div>
<div class="target">Not squashed to composited div</div>

In this example, .target overlaps the Compositing Layer .composited. However, as .composited is in the overflow: hidden container, .target and the Compositing Layer have different clipping containers, and .target cannot be squashed. The PaintLayer that scrolls with respect to the Compositing Layer cannot be squashed (scrollsWithRespectToSquashingLayer).

Example: Demo

<style>
body {
  height: 1500px;
  overflow-x: hidden;
}

.composited {

  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 50px;
  top: 400px;
  transform: translateZ(0);
}

.overlap {
  width: 200px;
  height: 200px;
  background-color: green;
  position: fixed;
  left: 0px;
  top: 0px;
}
</style>

<div class="composited"></div>
<div class="overlap"></div>

In this example, the red .composited layer is upgraded to a Compositing Layer, and the green .overlap layer is fixed at the top of the page. Only .composited is the Compositing Layer.

When the page is scrolled and .overlap overlaps .composited, .overlap is upgraded to a Compositing Layer. At the same time, it cannot get squashed because it gets scrolled concerning the Compositing Layer.

When the PaintLayer and Compositing Layer have different ancestor layers with the opacity attribute, the PaintLayer cannot get squashed (squashingOpacityAncestorMismatch, same as squashingClippingContainerMismatch). This rule is applicable if the opacity attribute of one ancestor layer is smaller than 1 and is not set for the other ancestor layer. (Demo)

When the PaintLayer and Compositing Layer have different ancestor layers with the transform attribute, the PaintLayer cannot be squashed (squashingTransformAncestorMismatch, same as above). (Demo)

When the PaintLayer and Compositing Layer have different ancestor layers with the filter attribute, the PaintLayer cannot be squashed (squashingFilterAncestorMismatch, same as above). (Demo)

When the overlapped Compositing Layer is animating, the PaintLayer cannot get squashed (squashingLayerIsAnimating). The PaintLayer can get squashed only when the animation is not started or gets finished. (Demo)