1 the Transform animation

You may have encountered or developed the need for moving animations like clicking on items and flying them into your shopping cart 🛒. But how is the implementation of Transform different from Absolute?

There seems to be no difference between the Transform and Absolute animations. To better observe the difference between the two implementations, we turn on the redraw switch of the browser to observe the redraw of elements:

The example shows that the Absolute implementation element is always redrawn while moving, but the Transform element is not redrawn. It appears that the transform does not trigger the redraw operation. To understand why, start with browser rendering.

2 Browser Rendering

2.1 What happens behind the DOM tree?

As we all know, the browser requests a front-end resource to build a DOM tree and a CSSOM tree. The CSSOM tree and THE DOM tree are combined into a Render tree, which is then used to calculate the layout of each visible element and draw it to the screen. Render Tree is not final data. From the DOM to the browser screen, there are many steps in between, such as Render Object, RenderLayer, Graphics Layer.

2.2 Render the Object Tree

As mentioned above, CSSOM and DOM are combined into a Render Tree to calculate the layout of each visible element. Defining and storing this visible element is the job of our new student Render Object.

Each visual node in the DOM Tree corresponds to a Render Object. The Render Object is stored in a parallel Tree structure called the Render Tree, so we can simply understand that the Render Object Tree is the product of the synthesis of DOM and CSSOM and the removal of invisible nodes.

Render Object rule:

  1. The Document node in the DOM tree
  2. Visual node [1]
  3. Anonymous Render Object generated in some cases [2]

[1] Invisible nodes

Nodes with no visual meaning such as meta, head, script, etc. display: none; The node (note that visibility: hidden; Is visible)

[2] Anonymous Render Object

In some cases, the browser will actively generate an anonymous Render Object. For example, according to the CSS specification, an inline element can only contain a block element or one of the inline elements. If multiple types are included, an Anonymous box model is automatically created, which also corresponds to an Anonymous RenderObject.

RenderObject knows how to draw the contents of a Node on a canvas. This is done by making the necessary draw calls to GraphicsContext. GraphicsContext is responsible for writing pixels to the bitmap and eventually displaying them on the screen. In Chrome, GraphicsContext wraps our 2D graphics library, Skia.

2.3 Render Layer

Recall that the layout order of a web page is very complex, with z-index hierarchy, overflow include, crop, etc. This kind of cascading relationship is not reflected in Render Object. So the Render Layer helps the browser store information about the Layer.

Render Layer and Render Object are not one-to-one correspondence. Share the same coordinate space (e.g. Render objects affected by the same CSS transformation belong to the same Render Layer. Each Render Object is associated with the Render Layer either directly or indirectly through an ancestor Render Object.

When a RenderObject is associated with a RenderLayer:

  • The root object of the page.
  • Has explicit CSS location attributes (relative.absolute.transform).
  • Is transparent (opacity< 1).
  • There areoverflow.alpha maskorreflectionProperties.
  • There is a CSS filter.
  • <canvas>2D / 3D context (WebGL).
  • <video>Elements.

2.4 Graphics Layer

The browser divides the DOM into multiple Render layers and rasterizes them, draws them independently into bitmaps, and then uplots them to the GPU as textures for composition. However, if the rasterized Render Layer contains high consumption content such as video, Web GL, etc., a small update can cause a performance bottleneck for the browser.

To avoid this, browsers provide Graphics Layer storage for specific renderlayers. For these operations, you can skip Reflow and Repaint and Composite directly on the GPU.

Each Graphics Layer has a GraphicsContext for the associated RenderLayer to draw. The browser will upload the GraphicsContext bitmap to the GPU as a texture through the synthesizer later in the process and synthesize it into the final screen image. It not only liberates the main thread, but also makes use of the great advantage of GPU in graphics processing.

Theoretically all Render layers could be promoted to Graphics Layer, but in practice doing so would be a waste of memory and other resources. Render Layer that currently meets the following criteria can have its own Graphics Layer.

  • 3D or perspective transformation (perspective.transform) CSS properties.
  • Uses elements that accelerate video decoding.
  • Elements that have either a 3D (WebGL) context or an accelerated 2D context.
  • Hybrid plug-ins (such as Flash).
  • rightopacityDo CSS animations or use onetransformTransforms the elements of the animation.
  • Elements that have accelerated CSS filters.
  • The iframe or containposition: fixedThe element.

Implicit synthesis

  • An element has a descendant node that contains a composite layer (in other words, an element has a child element that is in its own layer).
  • The element has onez-indexA sibling element that is lower and contains a composite layer (in other words, the element is rendered above the composite layer).

synthesizer

The synthesis step is closely related to the synthesizer.

Chrome’s synthesizer is a software library for managing the Graphics Layer tree and coordinating the framework lifecycle.

Rendering usually takes place in two stages: painting and compositing. In hardware-accelerated architectures, compositing is done by calling platform-specific 3D apis (D3D on Windows; Anywhere else for GL) on the GPU. When a page is rendered through a synthesizer, all of its pixels are drawn directly into the back buffer of the window by the GPU process.

A synthesizer can perform other tasks on a per-layer basis. For example, the synthesizer is responsible for applying the necessary transformations (specified by the layer’s CSS Transform property) to the bitmap of each compositing layer before compositing. Furthermore, since the drawing of layers is separate from composition, invalidating one of these layers will only result in redrawing the contents of that layer and composition.

The basic task of the synthesizer is to obtain enough information from the main thread to generate frames independently in response to future user input, even if the main thread is busy and cannot request other data.

This may explain why developers prefer Transform.

The transform container will be promoted to the Graphics Layer. For the compositing Layer, the synthesizer can use the GPU to process the textures (uploaded bitmaps) before compositing. This operation causes the animation container to skip the rearrangement and redrawing stage and directly synthesize. And the synthesizer operates on a copy of the main thread’s data. Even if the main thread is busy with other JavaScript operations, the synthesizer will not block.

2.5 Lift the composition layer

Advantages of synthetic layer:

  • The bitmap of the synthetic layer is generated by GPU as a texture, and GPU can process graphics quickly.
  • The composite layer acts as an independent layer and does not affect other layers when reflow and redraw.

If the composite layer is so powerful, why not take advantage of it? Smart developers have been doing this for a long time.

2.5.1 transform: translateZ (0)

The earliest (lower browser) developers used Transform: translateZ(0) to trick the browser (because it would use the GPU to calculate perspective distortion (even if it ended up with no distortion at all) into elevating the layer.

Note: There is a pit where the transform element creates an include block, which causes position: fixed/absolute to be the parent element.

2.5.2 backface – visibility: hidden

Transform: translateZ(0) makes the element blink in earlier versions of Chrome and Safari (now not), so it is recommended to backface-visibility: hidden instead

2.5.3 will change: –

In March 2016, IOS9 gained support for the will-change property, which tells browsers that a property is likely to change, and browsers can apply optimizations speculatively to accommodate those future changes. Use will-change: transform or will-change: opacity in this case, which forces the element to be elevated to a composition layer.

2.6 Rational use of the two-sided sword of composite layer

While compositing layers are a great tool for animation optimization, they can backfire when used improperly.

2.6.1 Creating Costs

Rendering is divided into two steps: painting and composition. Drawing (JS, Style, Layout, Paint) is done on the CPU, composing is done on the GPU. But converting from CPU to GPU requires some upfront work.

  • The CPU draws each compositing layer as a separate image.
  • Prepare layer data (size, offset, opacity, etc.).
  • Prepare shaders for animation (if applicable).
  • Send data to GPU.

So each state transition to and from synthesis is accompanied by these steps. The amount of resources consumed depends on the size and number of layers of the composite layer itself.

2.6.2 layer explosion

As mentioned above, GPU will cache the uploaded texture so as to be reused in the future animation. Data transmission between CPU and GPU also requires a certain bandwidth, while the bandwidth of the bus between CPU and GPU is not wireless. These factors lead to a composite layer that can become expensive (especially if your computer is resource-poor).

For example, a 320x240px solid color image, if the image is JPG(RGB) will take up 320 × 240 × 3 = 230,400 bytes of computer memory, For transparent pixels (PNG,RGBA), 320 × 240 × 4 = 307,200 bytes is required.

Whether it’s memory usage or bandwidth at upload time, it matters.

Where we refer to inherent composition causes (for example, layers with 3D transformations) as “direct” composition causes. Combined with implicit composition reasons, the number of composition layers can easily be out of the developer’s control, leading to high resource usage and disappointing performance. That’s the layer explosion problem. To prevent “Layer explosion” due to placing many elements on the directly composited Layer, the browser overlapped multiple Render Layers with the Directly composited Render Layer and then “squeezed” them into a single backup store. Although browsers have certain optimization tools (layer compression), increasing the number of layers properly to reduce the load on the device is also a consideration.

2.6.3 Managing the composition layer

Using DevTools, we can intuitively understand the number of compositing layers and the amount of memory occupied by the page. Open the console, hold SHIFT+ Command + P to open the search screen, type Show Layer, and click open Layer panel.

The left side of the second picture is a composition layer, and the lower right corner shows the composition reason of the current composition layer and the amount of memory occupied.

  1. Reduce the number of synthetic layers

The most intuitive way, of course, is to reduce the number of composite layers. This is divided into active ascension and implicit synthesis. Proactive promotion of course requires developers to consider the cost performance of proactive promotion. We pay more attention to implicit composition, as follows:

Elements A and B are in the overlapping state. If element B is an element with A composition layer applied (such as Canvas, iframe, video, etc.), element A on it will be passively promoted to the composition layer. At this point, you have to consider whether it is reasonable to put A on B, or replace the unwise design in some other way.

  1. Reduce the composition layer size

The image on the left uses a 39KB image, while the image on the right uses a 400B image with a transform: Scale (…) Zoom in to the same size as the image on the far left.

It is a good idea to first reduce the width and height of the image and then perform the transform:scale operation. Although we will not all use pure color images, we can try within the acceptable range of users, so as to exchange a small range of accuracy loss for a smooth experience of the whole page.

3 Reference Documents

CSS GPU Animation: Doing It Right

GPU Accelerated Compositing in Chrome

How browsers render pages

WEBKIT renders the four indispensable trees

❤️ Thank you

That is all the content of this sharing. I hope it will help you

Don’t forget to share, like and bookmark your favorite things.