Front-End Performance Optimization with Accelerated Compositing Part 2

How to View a Compositing Layer

Use Chrome DevTools to view the Compositing Layers on a page. An easy way is to start DevTools and selectShow layer borders.

Performance Optimization

Upgrade to the Compositing Layer has the following advantages:

  1. When repainting is required, only the Compositing Layer gets repainted, and other layers are not affected.
  2. The transform and opacity effects do not trigger layout and painting.

Upgrade Elements with Animation Effects to Compositing Layers

An advantage of the Compositing Layer is that it does not affect painting of other elements. To reduce the impact of animation elements on different elements and reduce painting, elements with animation effects must get upgraded to the Compositing Layers.

#target {
will-change: transform;
}
#target {
transform: translateZ(0);
}

Use Transform or Opacity for Animating

The description of a rendering pipeline for displaying a page is at the beginning of this document. From the performance perspective, an ideal rendering pipeline has no layout or painting, and only compositing is the requirement.

Reduce the Painting Areas

Do not repaint areas unless necessary to reduce the painting areas. For example, a navigation header gets fixed at the top of the page. When an area on the page gets repainted, the entire page, including the fixed header, is repainted, as shown in the demo. The result is as follows:

Properly Manage the Compositing Layers

Once you finish reading the above sections, you will learn that an upgrade to the Compositing Layer helps in achieving better performance. It seems attractive, but the problem is that creating a Compositing Layer is not free, which consumes extra memory and management resources. In fact, on devices with limited memory resources, the improved performance brought by the Compositing Layers is much lower than the deteriorated performance due to overheads of too many Compositing Layers. Also, as the texture of each PaintLayer must get uploaded to the GPU, the bandwidth between the CPU and GPU and the size of the memory available for the GPU to process the textures must be considered.

Avoid Layer Explosion

As described above, elements overlapping Compositing Layers will get upgraded to the Compositing Layers. Although the browser implements layer squashing, it is impossible to squash many layers, i.e., besides the explicit Compositing Layers, unexpected Compositing Layers, or even a great number of Compositing Layers, may be generated due to the overlap. In this case, layer explosion occurs. The following is a demo in an extreme scenario, which, however, is common on pages.

<style>
@-webkit-keyframes slide {
from { transform: none; }
to { transform: translateX(100px); }
}
.animating {

width: 300px;
height: 30px;
background-color: orange;
color: #fff;
-webkit-animation: slide 5s alternate linear infinite;
}
ul { padding: 5px;
border: 1px solid #000;
}
.box { width: 600px;
height: 30px;
margin-bottom: 5px;
background-color: blue;
color: #fff;
position: relative;
/* Unable to squash: squashingClippingContainerMismatch */
overflow: hidden;
}
.inner {
position: absolute;
top: 2px;
left: 2px;
font-size: 16px;
line-height: 16px;
padding: 2px;
margin: 0;
background-color: green;
}
</style>
<!-- Animation Compositing Layer -->
<div class="animating">composited animating</div>
<ul>
<!-- assume overlap -->
<li class="box">
<!-- assume overlap -->
<p class="inner">assumedOverlap, unable to squash due to squashingClippingContainerMismatch</p>
</li>

...
</ul>
.animating {

...
/* Prevent other elements from overlapping the Compositing Layers. */
position: relative;
z-index: 1;
}

Conclusion

During wireless development, most users like to use translateZ(0) to perform so-called hardware acceleration for performance improvement. However, no “silver bullet” can be used for performance improvement, neither translateZ(0) nor optimization suggestions listed in this document. Any performance optimization is untenable without analysis of the page. Randomly taking optimization measures may cause the contrary effect. Therefore, the correct optimization method is to analyze the actual performance of the page and continuously perform rectification tests.

Follow me to keep abreast with the latest technology news, industry insights, and developer trends.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store