Animation development browser rendering related

Time:2021-1-17

Page rendering process

Let’s look at some of the classic flow charts

Browser infrastructure

Animation development browser rendering related

We have always said that JavaScript is single threaded, but browsers are multi-threaded. They cooperate with each other to keep synchronization under the control of the kernel. The main resident threads are:

GUI rendering thread

Responsible for rendering interface, parsing HTML, CSS, building Dom and render tree layout, etc. If JavaScript engine execution is suspended in the process, GUI updates are saved in a queue and wait for JavaScript engine to be idle before execution;

JavaScript engine thread

Responsible for parsing and running JavaScript; execution time process will lead to page rendering load blocking;

Event triggered thread

The browser is used to control the event loop. When the event triggered by the JavaScript engine (such as click, request, etc.) is executed, the corresponding task will be added to the event thread. When the corresponding event meets the trigger conditions and is triggered, the corresponding task will be added to the end of the processing queue and processed when the JavaScript engine is idle;

Timer trigger thread

Because the JavaScript engine is a single thread, it is easy to block, so it needs a separate thread to time and trigger for setTimeout and setinterval. Similarly, when the trigger condition is met (the timing is completed), the corresponding task will be added to the end of the processing queue and processed when the JavaScript engine is idle. According to W3C standard, the time interval less than 4ms is counted as 4ms.

Asynchronous HTTP request thread

After XMLHttpRequest is connected, the browser opens a new thread to request and detects a state change. If a callback function is set, a state change event will be generated. Then the corresponding task will be added to the end of the processing queue and processed when the JavaScript engine is idle;

Composite thread

Through GPU execution, the real page drawing and output to the screen

Page rendering

Animation development browser rendering related

The main steps of rendering process are as follows:

Parsing HTML to generate DOM tree

The whole process is a deep traversal operation. It will be constructed one by one from the top to the bottom of the current node, and then the same level node and its sub nodes will be constructed. I found a random figure on the Internet for the final structure, which is roughly as follows

Animation development browser rendering related

But it’s a processIt can be blocked by CSS or JavaScript loadingThis is a processing mechanism of the browser, because both of them may change the structure of the DOM tree, so they will continue to parse after they are executed

Parsing style to generate cssom tree

This is generated at the same time as the DOM tree, includingLink, style and inlineMultiple different styles are integrated and parsed into a final rule. The whole structure is similar to the attribute structure of DOM tree. I also found a random figure on the Internet for the final structure, which is roughly as follows

The integration of styles is a very complex process. There are many difficulties, such as default style, weight, inheritance, pseudo element, repeated definition, unit conversion and so on

The weight rules are as follows:

  • Element selector: 1
  • Class selector: 10
  • ID selector: 100
  • Inline style: 1000
  • ! important has the highest priority
  1. If the priority is the same, select the last style;
  2. The inherited style has the lowest priority;
  3. Nesting selector priority is additive, for example: # A.B = 100 + 10 = 110;

In fact, theThe parsing rules are from right to leftEach step can filter out some non-conforming branches until the root element or the selector that meets the matching rules is found. Therefore, try to avoid deep nesting of CSS, because finding the selector and calculating the final style will be affected

Combining the two to build a render tree

DOM tree and cssom tree are parsed according to the code, and the final rendering of the code to the browser must be the visual representation structure, because they all have font, color, size, location and even the existence of style control, the final structure I also found a picture on the Internet, probably as follows

Animation development browser rendering related

In general, it will traverse the entire DOM tree nodes, ignore the invisible nodes (such as meta, header, display: none and other nodes with specified attributes), get the CSS definition of each node and their affiliation, so as to calculate the position of each node in the screen

Start the layout drawing according to the render tree

The page layout takes the visible area as the canvas, from left to right, from top to bottom, starting from the root node. Traverse the render tree, call the API of the render to draw the node content, fill the screen, calculate and draw the pixel level information

In fact, this step is to draw on multiple layers

Composite

ActuallypaintAfter that,displayThere was another link calledRender layer merging

Animation development browser rendering related

Drawing DOM elements in a page is done on multiple layers. After finishing the drawing process on each layer, the browser will merge all layers into one layer in a reasonable order, and then display it on the screen. This process is particularly important for pages with overlapping elements, because if the merging order of layers is wrong, the elements will display abnormally. (details will be explained below)

Reflow and redraw

This usually occurs when the parsing process or the structure of the middle style is changed and the layout needs to be recalculated,

Reflow: when the browser finds that the changes affect the layout, it needs to recalculate

Redraw: only affects the visual effect of the current element without affecting other elements

Reflow is one of the important factors that affect the performance of the page

Rendering complete

This is not a step-by-step process. In order to render the interface to the user as soon as possible, the browser starts local rendering when it obtains the document content from the network request, instead of waiting for all HTML parsing to create rendering. Moreover, this is the basic process. In fact, there are some differences in the current mainstream browsers, and the whole rendering process will be optimized, So the process is not as slow as we think

Render layer composition

We’ll take it as an exampleChrometake as an example

There are actually several different layer types in chrome

  • Renderlayers render layer, which is responsible for the corresponding DOM subtree
  • Graphicslayers, which is responsible for the corresponding renderlayers subtree.

Renderlayers render layers

Each node in the DOM tree has a correspondingRender objectWhen they are in the sameCoordinate space (Z axis)It will form a render layer together. From above, we know that different render layers are distinguished by coordinate space, so

  • There can be multiple render layers
  • DOM elements can create new rendering layers by changing the context of the layer
  • The coordinate space determines the cascading context, but it is not the only factor

The conditions that can be met are as follows:

NormalPaintLayer

  • Document root element (< HTML >);
  • The element whose position value is absolute or relative and Z-index value is not auto;
  • The element with position value of fixed or sticky (sticky positioning is suitable for browsers on all mobile devices, but not supported by old desktop browsers);
  • Flex (flexbox) container, and the Z-index value is not auto;
  • Grid (grid) container, and the Z-index value is not auto;
  • Elements with an opacity attribute value less than 1 (see the specification for opacity);
  • Elements whose mix blend mode attribute value is not normal;
  • Any of the following elements whose attribute value is not none:

    • transform
    • filter
    • perspective
    • clip-path
    • mask / mask-image / mask-border
  • The element whose isolation attribute value is isolate;
  • -The element whose WebKit overflow scrolling attribute value is touch;
  • The will change value sets any attribute, and when the attribute has a non initial value, it will create elements of cascading context (refer to this article);
  • The value of the contain attribute is layout, paint, or an element containing one of their composite values (such as contain: strict, contain: content).

Excerpt fromstacking context

OverflowClipPaintLayer

  • Overflow is not visible;

NoPaintLayer

  • Paintlayer without paint, such as an empty div without visual attributes (background, color, shadow, etc.)

DOM nodes and rendering objects are one-to-one correspondence. The rendering objects that meet the above conditions have independent rendering layers, and those that do not will share the same layer with their first parent element,Renderobject determines the rendering content, while renderlayers determines the drawing order

Graphics layers

eachGraphicsLayerCorresponding to a rendering layer is responsible for the final rendering of the content graphics layer, it has a rendering layerGraphics contextResponsible for outputting the bitmap of the layer. The bitmap stored in shared memory will be uploaded to theGPUEach graphicslayer can render independently without mutual influence, so putting some frequently redrawn elements into a separate graphicslayer will not affect the whole page

Therefore, graphicslayer is an important rendering carrier and toolIt doesn’t deal with render layers directly, it deals with composite layers

Compositinglayer composite layer

Some special render layers are promoted toCompositing layersThe premise of promotion is toSelfPaintingLayer(it can be said that it is the one mentioned aboveNormalPaintLayer)The composite layer has a separate graphicslayer, while other render layers that are not composite layers share one with their first parent layer that has a graphicslayer.

When the following conditions are met, the rendering layer will be automatically promoted to the composite layer by the browser

Direct reason

  • Hardware accelerated iframe elements (for example, iframe embedded pages have a composition layer)
  • Video element
  • Video control bar over video element
  • 3D or hardware accelerated 2D canvas elements (ordinary 2D canvas will not be promoted to composite layer)
  • Hardware accelerated plug-ins, such as flash, etc
  • On the screen with high DPI, the elements located by fix will be automatically promoted to the composition layer. However, this is not the case on low DPI devices, because the enhancement of the rendering layer will change the font rendering mode from sub-pixel to gray scale
  • There is 3D transform
  • The backface visibility is hidden
  • Animation or transition is applied to opacity, transform, fliter and backdropfilter (the animation or transition needs to be active. When the animation or transition effect does not start or end, the promotion composition layer will also fail)
  • Will change is set to opacity, transform, top, left, bottom, right (top, left, etc. need to set explicit positioning attributes, such as relative, etc.)

The element causes of offspring

  • It has the offspring of composition layer, and it has the properties of transform, opaque (less than 1), mask, fliter and reflection
  • There are progenies of composite layer, and the overflow itself is not visible (if the selfpaintinglayer itself is generated by a clear positioning factor, the Z-index should not be auto)
  • There are composite layer Progenies and fixed localization itself at the same time
  • The progeny of composite layer with 3D transfrom also has preserves-3d attribute
  • The progeny of the composite layer with 3D transfrom also has the perspective attribute

Causes of overlap

  • Overlapped or partially overlapped on a composite layer. (we’ll talk about implicit composition below)

    • The most common and easy to understand is that the border box (content + padding + border) of the element overlaps with that of the composition layer
  • The filter effect overlaps with the composite layer
  • The transform overlaps with the composite layer
  • In the case of overflow scroll, it overlaps with the composite layer. That is, if an overflow scroll (no matteroverflow:autostilloverflow:scrillAs long as the elements that can be scrolled are overlapped with a composition layer, the visible sub elements are also overlapped with the composition layer
  • Assumed overlap

    For example, the CSS animation effect of an element, during the animation running, the element may overlap with other elements. In this case, there is a reason for the composite layer of assumed overlap. Even if the animation element does not visually overlap with its brother element, because of the assumed overlap, its brother element is still promoted to the composite layer.

    It should be noted that there is a very special case for this reason:

    If the composite layer has an inline transform attribute, it will cause its brother render layer to assume overlap, thus promoting it to a composite layer.

Excerpt fromWireless performance optimization: Composite

The composite layer has a separate graphicslayers, while the other render layers share the same parent layer as the first to have graphicslayers

Implicit synthesis

Some rendering layers will be promoted to composite layers by default in some specific scenes, for example

  1. Two absolute positioning elements with different Z-index attributes are overlapped. You can see from the console that the two elements share the same graphicslayers with the parent element

Animation development browser rendering related

  1. In this case, if you addtransform: translateZ(0)After being promoted to the composition layer, it should be higher level, but in fact, both elements are promoted to the composition layer. This is because in order to correct the stacking order and ensure the visual effect is consistent, the browser implicitly forces the element that is higher than the underlying element level to be promoted to the composition layer

Animation development browser rendering related

Layer explosion and layer compression

Layer explosion

The conditions of some composition layers are very hidden, resulting in the generation of composition layers that are not in the expected range. After reaching a certain number, the performance will be seriously consumed, the GPU and a large amount of memory resources will be occupied, and the page will jam, and the formation layer will explode

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        @keyframes slide {
            from {
                transform: none;
            }

            to {
                transform: translateX(100px);
            }
        }

        .animating {
            width: 300px;
            height: 30px;
            background-color: orange;
            color: #fff;
            animation: slide 5s alternate linear infinite;
        }

        #ul {
            margin-top: -20px;
            padding: 5px;
            border: 1px solid #000;
        }

        li {
            width: 600px;
            height: 30px;
            margin-bottom: 5px;
            background-color: blue;
            color: #fff;
            position: relative;
            /*Will cause uncompressed: squashing clipping container mismatch*/
            overflow: hidden;
        }

        p {
            position: absolute;
            top: 2px;
            left: 2px;
            font-size: 16px;
            line-height: 16px;
            padding: 2px;
            margin: 0;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="animating">composited animating</div>
    <ul id="ul"></ul>
</body>
<script>
    window.onload = function() {
        var $ul = document.getElementById('ul');
        for (var i = 0; i < 10; i++) {
            var ulObj = document.createElement("li");
            var pObj = document.createElement("p");
            pObj.innerText = i
            // ulObj.appendChild(pObj);
            $ul.appendChild(ulObj);
        }
    }
</script>

</html>

Experiment can be about 10 have begun to block, 100 on the basic card dead. Now look at the console layer
Animation development browser rendering related

The reason for the layer explosion is that the following conditions are met:

  1. The animation element applies transform animation and is promoted to the composition layer
  2. During the animation running, the element may overlap with other elements (assumed overlap). The animation element does not visually overlap with its sibling element, but because theassumedOverlap The reason is that its brother elements are still promoted to the synthetic layer. So the Li element is promoted to the composition layer. If this is the only case, it can be compressed
  3. Li set upoverflow: hidden, when the rendering layer and the composition layer have different clipping containers, the rendering layer cannot be compressed (squashing clipping container mismatch)

The best solution is to break the overlap condition, that is, let other elements not overlap with the composition layer elements.

  1. Let the other elements not overlap the composite layer

    .animating {
      ...
      position: relative;
      z-index: 1;
    }

Animation development browser rendering related

  1. If you need to overlay the animation, you can adjust the style instead of the clipping style and remove the overflow attribute

Animation development browser rendering related

Layer compression

The browser will optimize when multiple render layers overlap the same composite layer. These render layers will be compressed into a graphicslayer to prevent possible “layer explosion” caused by overlap. Continue to add elements with the above example
Animation development browser rendering related

It can be found that multiple different elements promoted to the composition layer will be promoted to the same composition layer together, but there are also many cases that can not be compressed. But it is not inevitable, there are also many cases that can not be compressed

  • Unable to squashing would break in order

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #container {
                position: relative;
                width: 420px;
                height: 80px;
                border: 1px solid black;
            }
    
            #composited {
                width: 100%;
                height: 100%;
                transform: translateZ(0);
            }
    
            #ancestor {
                -webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
            }
    
            #overlap-child {
                position: absolute;
                left: 0;
                top: 10px;
                bottom: 0px;
                width: 100%;
                height: 60px;
                background-color: orange;
            }
        </style>
    </head>
    
    <body>
        <div id="container">
            <div id="composited">Text behind the orange box.</div>
            <div id="ancestor">
                <div id="overlap-child"></div>
            </div>
        </div>
    </body>
    
    </html>

Animation development browser rendering related

In this case,#overlap-childIf it overlaps with the composition layer, if it is compressed, the rendering order will be changed and the parent element will be deleted#ancestorThe mask attribute of will be invalid, so in this case, layer compression cannot be performed. At present, there are two common reasons for this, one is that the ancestor element uses the mask attribute, the other is that the ancestor element uses the filter attribute

  • The render layer of a video element cannot be compressed, and other render layers cannot be compressed to the video’s composite layer (squashing video is disallowed)
  • The rendering layer of iframe and plugin cannot be compressed, and other rendering layers cannot be compressed to their composition layer (squashing layout parts is disallowed)
  • Unable to compress rendering layer with reflection attribute (squashing reflection disallowed)
  • Unable to compress render layers with blend mode attribute (squashing blending disallowed)
  • When the rendering layer and the composition layer have different clipping containers, the rendering layer cannot be compressed (squashing clipping container mismatch)

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <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>
    </head>
    
    <body>
        <div class="clipping-container">
            <div class="composited"></div>
        </div>
        < div class = "target" > will not be compressed to composite div
    </body>
    
    </html>

Animation development browser rendering related

In this case.targetSame as synthetic layer.compositedOverlap, but due to.compositedIn aoverflow: hiddenIn the container of.targetThere is a different clipping container than the composition layer, so that.targetCannot be compressed.

  • The render layer scrolling relative to the composition layer cannot be compressed (scrollswithrespecttosquarishinglayer)

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <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>
    </head>
    
    <body>
        <div class="composited"></div>
        <div class="overlap"></div>
    </body>
    
    </html>

Animation development browser rendering related

red.compositedUpgrade to composition layer, when sliding page,.overlapOverlap to.compositedWhen you go up to school,.overlapAt the same time, it can’t be compressed because it rolls relative to the composite layer

  • When the rendering layer and the composition layer have different ancestor layers with opacity (one with opacity set and less than 1, and the other without opacity set, it is also different), the rendering layer cannot be compressed (squashing opacityancestormismatch, the same as squashing clipping container mismatch)
  • When the rendering layer and the composition layer have different ancestor layers with transform, the rendering layer cannot be compressed (squashing transform ancestor mismatch, ditto)
  • When the render layer and the composition layer have different ancestor layers with filters, the render layer cannot be compressed (squashing filter ancestor mismatch, ditto)
  • When the animation is running on the covered composite layer, the rendering layer cannot be compressed (squashing layer is animating). When the animation is not started or finished, the rendering layer can be compressed (I haven’t experimented with this piece, just use the original image)

Sort out the process

Let’s review the flow chart
Animation development browser rendering related

  1. The document is parsed into corresponding DOM tree structure and cssom tree structure
  2. Then it is parsed into a render tree, and each node is parsed into the corresponding render treeRenderObject, which contains information about how the browser renders nodes. If some nodes are not rendered, the correspondingRenderObject, andRenderObjectThe role of the government is toGraphicsContextIssue a drawing call to draw the element
  3. The render tree is then parsed into the renderlayers tree, and the renderobject is parsed into different renderlayers rendering layers according to the stacking order,
  4. The renderlayers tree is parsed into a graphicslayers tree, and each graphicslayer has its own graphicscontext to render independently
  5. Some special renderlayers will also be promoted to compositing layers with separate graphics layers
  6. Start to draw layer tree layer by layer. The drawing of a layer will be divided into many simple layersDrawing instructionAnd then put them in order into oneDraw list. After the drawing list is generated, the main thread of the rendering process (GUI rendering thread) will send a message to the composite thread to start drawing the page.
  7. Split a block. The purpose of splitting a block is to give priority to drawing the content covered by the first screen instead of waiting for a layer to be displayed after drawing. At the same time, chrome WebKit takes into account that the content of the first screen may still be very complex, resulting in a long drawing time. In order to improve the user experience, when drawing a block, it will first display a low resolution image, and when the block is finished, it will draw the low resolution image into a complete image. (this is the browser optimized rendering part mentioned above)

Animation development browser rendering related

  1. Rasterization, rasterization will convert tiles into bitmaps. If GPU hardware acceleration is turned on, the conversion process will be completed in the GPU process, and the generated bitmaps will be cached in theGPU memoryIf GPU hardware acceleration is not turned on, the rendering process will complete, and the generated bitmap will be cached in theShared memoryIn the middle.

Animation development browser rendering related

  1. After the rasterization in the previous step, the composite thread will send a message to the browser main process to get the bitmap data from memory and draw the bitmap to the screen.

Animation development browser rendering related

Drawing excerpt fromUnderstand the process and principle of browser rendering

Differences between CPU and GPU rendering

CPU

Central processing unit (CPU), as the core of computer system, is the final execution unit of information processing and program running.

In the computer architecture, CPU is the core hardware unit which controls and allocates all the hardware resources (such as memory, input and output unit) of the computer and performs general operations. CPU is the core of computer operation and control. The operation of all software layers in computer system will be mapped to the operation of CPU through instruction set.

GPU

Graphics processing unit (GPU), also known as display core, visual processor and display chip, is a kind of microprocessor which is specially used to do image and graphics related operations on personal computers, workstations, game machines and some mobile devices (such as tablet computers, smart phones, etc.).

GPU makes the graphics card less dependent on CPU, and does part of the original CPU work. Especially in 3D graphics processing, the core technologies adopted by GPU include hardware T & L (geometry conversion and lighting processing), cubic environment material mapping and vertex blending, texture compression and bump mapping, dual texture four pixel 256 bit rendering engine, and so on. Hardware T & L technology can be said to be the symbol of GPU.

It can not only store graphics, but also complete most of the graphics functions, which greatly reduces the burden of CPU and improves the display capacity and speed.

It can be seen from the above that when the CPU processes the bitmap information and hands it to GPU for rendering, it can greatly relieve the CPU burden and render layers quickly. Of course, overuse will lead to serious performance degradation and excessive memory consumption

Recommended Today

DK7 switch’s support for string

Before JDK7, switch can only support byte, short, char, int or their corresponding encapsulation classes and enum types. After JDK7, switch supports string type. In the switch statement, the value of the expression cannot be null, otherwise NullPointerException will be thrown at runtime. Null cannot be used in the case clause, otherwise compilation errors will […]