Layer-compositing

An article introduced the page animation effect optimization article Denver: crazy operation CSS3 to achieve 60 FPS animation effect, CodeReview colleagues call: details!

Already weak on CSS, I decided to take a closer look at what Composite is.

Pixel pipe

  • JavaScript. In general, we will use JavaScript to achieve some visual changes. Like jQueryanimateFunction to animate, sort a data set, or add some DOM elements to a page. 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(Style). This process is based on the match selector (e.g.headline 或 .nav > .nav__itemThe process of figuring out which elements apply which CSS rules. Once you know the rules from this, you apply the rules and calculate the final style for each element.
  • layout(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<body>The width of an element generally affects the width of its child elements and nodes throughout the tree, so the layout process is a common occurrence for browsers.
  • Paint. 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).
  • Composite. 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.

Each of these steps can cause render performance to stall, so it is important to determine which part of the pipe the code triggers.

How does the page go from the file to the screen the user sees

  1. Download the HTML file and the associated CSS file and parse it into a Dom Tree

  2. Dom+CSS generates the Render Tree, which is the content in Compputed Style. So what did you do? 1) Parse the undisplayed DOM-Node and delete it from the tree. 2) Parse the content of the pseudo-class and insert a new DOM-Node. Note that the

    and

  3. Render Tree + CSS to parse out the Layout, that is, geometric content, box relationship. When one of the links changes, affecting the related elements and passing the influence from top (root) to bottom (leaf) to create a layout change is also called Reflow, or backflow.

  4. Painting, raster the Render Tree to fill as a layer.

  • Rasterization is the filling of vector graphics (left) into individual pixels through a raster to form a bitmap (right)

  • So back to that simple code, how does the raster work?

  • Finally, draw a layer
  1. Composite, incrementally render the parsed layer. Even minor changes to the layer in figure 1 will render the entire layer, and combining these layers is key in performance optimization.

Frame rate optimization -Composite

  • The key to affecting framerate is what steps your “changes” affect and what ripple effects they cause.
  • Let’s look at a table of the pixel pipeline phases that each style attribute triggers

[Form Triggers](CSS Triggers)

Here are two examples of how to use the Performance checking tool to debug and modify code that causes Performance problems

We dive directly into code optimization, using a github repository [repository address](Udacity/news-Aggregator at Gh-Pages (github.com)), without committing to read the code, starting with a performance checking tool

After running the code, we see an interface like this:

Reduce meaningless geometric changes

  1. Open F12, select the Performance TAB, press Ecs to open the console, and add Rendering TAB

  1. Scroll through a TimeLine (formerly called TimeLine now called Performance) and you can see the framerate is awful, with lots of red marks

  1. Expanding the rendering details we find that there is a lot of Force synchronous layout -> Force Reflow, and the call stack display is colorizeAndScaleStories

  1. Inside colorizeAndScaleStories, we find that js is changing the dom width and height in real time

From the trigger table above we know that Width, Height is all trigger!

The function calculates the position of each news item by changing the color and size of the left counter disk in the bottom half of the screen and keeping it centered in the line. It doesn’t work from a demand point of view, but it does a lot of damage to page performance, so just kill it and see what happens.

Compared to just one backflow per frame, it’s pretty pleasing, and the frame rate is definitely better. Great!

Animation please use CSS as far as possible

Click on a message to view details (message details slide in and out like Menu)

We see a backflow caused by an unusually large Layout.

Expanding the details, we can see that this is caused by a method called animate.

RequestAnimationFrame = requestAnimationFrame = requestAnimationFrame = requestAnimationFrame = setTimeout = setTimeout

  • After walking through the logic, showStory is called by clicking on the message to call showStory, hideStory is called by clicking on the icon X, and animate is added and subtractive to the left to control the slider position.

  • OnStoryClick, bing with the corresponding ID to showStory and hideStory, and setTimeout executes. During execution, create a slider to insert the Dom body (but not remove it, wasting performance and memory).

The purpose is simple:

  • Create a node directly for content populating after selecting the news content.

  • Animation is implemented using CSS.

The end result is that the slide-in-slide-out animation runs at 60 frames, and it’s silky.

conclusion

When writing interactions and animations, it’s easy to trigger rearrangements, backflow, and redraw operations to create a poor performance experience. Being familiar with all stages of rendering and knowing how to avoid wrong writing at all stages will result in smooth, silky pages.

Data summary

  • Video browser rendering optimization – Udacity

  • Rendering performance | Web | Google Developers

  • Video to learn the code repository demo

  • v8 will compositing reasons source code compositing_reasons.h – Code Search (chromium.org)

  • Layers and Composite: CSS GPU Animation: Doing It Right — Smashing Magazine