How browsers render

1. The render tree

The DOM tree is merged with the CSSOM tree to form the render tree.

  • The render tree contains only the nodes needed to render a web page.
  • The layout calculates the exact position and size of each object.
  • The final step is rendering, using the final render tree to render the pixels onto the screen.

The browser merges DOM and CSSOM into a “render tree” that captures all the visible DOM content on the page, as well as all CSSOM style information for each node.

2. Rendering steps

Here is a brief overview of the steps the browser completes:

  1. Process HTML tags and build DOM trees.
  2. Process CSS tags and build CSSOM trees.
  3. Merge DOM and CSSOM into a render tree.
  4. Layout according to render tree to calculate geometric information for each node.
  5. Draw the individual nodes to the screen.

Our demo page may look simple, but it actually requires quite a bit of work. If the DOM or CSSOM is modified, you can only perform all of the above steps once more to determine which pixels need to be rerendered on the screen.

Optimizing the critical render path means minimizing the total time spent performing steps 1 through 5 above. This allows content to be rendered to the screen as quickly as possible, in addition to reducing the screen refresh time after the first rendering, resulting in a higher refresh rate for interactive content.

We usually update styles with JS like div. Style. background = ‘red’ like div. Style. display = ‘none’ like div. Classlist. add (‘red’) For example, div.remove() simply removes the node

So what’s the difference between these methods?

  • JavaScript. In general, we will use JavaScript to achieve some visual changes. Do an animation, sort a data set, or add DOM elements to a page using jQuery’s Animate function. Of course, in addition to JavaScript, there are other common ways to achieve visual changes, such as CSS Animations, Transitions, and the Web Animation API.
  • Style calculation. This is the process of figuring out which elements apply which CSS rules based on the match selector (for example.headline or.nav >.nav__item). Once you know the rules from this, you apply the rules and calculate the final style for each element.
  • Layout. Once you know which rules to apply to an element, the browser can start calculating how much space it takes up and where it is on the screen. The layout pattern of a web page means that one element can affect other elements, for example, the width of an element generally affects the width of its children and nodes throughout the tree, so the layout process is a common occurrence for browsers.
  • To draw. Drawing is the process of filling pixels. It involves drawing text, colors, images, borders, and shadows, basically including every visible part of an element. Drawing is typically done on multiple surfaces (often called layers).
  • Synthesis. Because parts of a page may be drawn to multiple layers, they need to be drawn to the screen in the correct order to render the page correctly. This is especially important for elements that overlap with another element, because an error can cause one element to mistakenly appear on top of another.

3. Rendering method

There are three different rendering methods:

JS/CSS > Style > Layout > Draw > Composition

Complete pixel pipeline

If you modify the element’s “layout” attribute, that is, change the element’s geometry (such as width, height, left or top position, etc.), the browser will have to examine all the other elements and then “automatically rearrange” the page. Any affected parts need to be redrawn, and the final drawn elements need to be composited.

JS/CSS > Styles > Draw > Composition

Pixel pipe without layout.

If you change the “Paint Only” properties (such as background images, text colors, or shadows) that do not affect the properties of the page layout, the browser skips the layout but still performs the drawing.

JS/CSS > Styles > Composition

No layout or drawing of pixel pipes.

If you change a property that does neither layout nor draw, the browser jumps to just perform composition.

This final version has the least overhead and is best suited for high-stress points in the application life cycle, such as animation or scrolling. The transform property is a basic and important property to realize front-end animation, and the transition, together with animation and Transform, can make animation more diversified.

Summary of CSS animation knowledge

Transform and its four property values

1. Translate

transform: translate(12px, 50%);
transform: translateX(12px);
transform: translateY(50%);
transform: translateX(-12px);
transform: translateY(-50%); 
Copy the code

The displacement can be carried out in the X-axis, Y-axis and even the Z-axis. Generally, the effect of 2D displacement in the Z-axis is difficult to be distinguished by the naked eye (the rule is near large and far small), and the value can also be positive, negative and percentage (its own size of the hundred points).

Positive numbers move in the positive direction of the axis, that is, the arrow points in the direction of the axis, negative numbers move in the opposite direction.

Here’s a trick for centralizing elements (code below)

Left: 50%; Top: 50%; transform:translate(-50%,-50%);Copy the code

2. Scale

The transform: scale (1.2); Scale (2, 0.5); transform: scaleX(2); Transform: scaleY(0.5); Only in the y directionCopy the code

3. Rotate by default rotates based on the Z-axis

Transform: Rotate3D (1, 2.0, 3.0, 10DEg); Transform: rotateX(10DEg); transform: rotateY(10deg); transform: rotateZ(10deg);Copy the code

4. Skew

transform: skew(30deg, 1deg);
transform: skewX(30deg);
transform: skewY(1deg);
Copy the code

What we need to pay attention to is the difference between tilting and rotating, rotating the image will not change, tilting will make the image lose its original shape, become flat, like chewing gum pull hard it will become very thin.

Transition

As the name suggests, making the Transform change has an overkill effect, otherwise the Transform moves as if it were traversing.

Transition contains four attributes:

Transition-property,

Duration: transition-duration,

Transition-timing -function,

Delay time: transition-delay.

It can be written as

Transition: Attribute name, duration, transition mode, delay

You can write multiple transition-property names at the same time separated by commas (,).

The name of the property can be: all (any property changes, which is commonly used), opacity,color (background-color,border-color, etc.), etc

2, transition-duration

3, Transition-timing-function

A, 'ease' :(gradually slow) default b, 'linear' :(constant speed) c, 'ease-in' :(speed up) d, 'ease-out' :(speed up and then slow down) e, 'ease-in-out' :(speed up and then slow down)Copy the code

There are only a few commonly used.

4. Transition-delay

Note: Never use display: None →display: block for transitions,

Convert to visibility: hidden→visibility: visible.

animation

First declare a keyframe (@keyframes) – the main function is to define the state of the animation at different stages.

@keyframes xxx {  

  from { transform: scaleX(0); }  
  
  to   { transform: scaleX(1); }}Copy the code

XXX (optional declaration) is finally written in the property value of the animation (match)

 @keyframes xxxx {  
    0% {}  
    30% {}  
    50% {}  
    70% {}  
    80% {}  
    100%{}}Copy the code

There are generally two different ways to write it, depending on individual needs to choose.

Animation property values: Duration, transition mode, delay, times, direction, fill mode, pause or not, animation name (XXXX).

1. Duration (S, MS, etc.)

2. Transition

3. Delay (S, MS, etc.)

4, times (execute several times, one-way repeat, join direction to achieve round trip)

5, direction A, normal Direction

B, alternate

C, reverse comes back (back and forth)

D, alternate-reverse starts from the endpoint first, and then from the starting point

6. Fill mode

A, None Do not change any styles before and after animation execution

B. Forward preserves the style of the last frame of the target animation

C, Backwards keep the first frame of the target animation style

7. Whether to suspend paused and running

8, animation name @keyframes name, name yourself

Answer about the interview

JS optimization: Use requestAnimationFrame instead of setTimeout or setInterval CSS optimization: Use will-change or translate