#Web page layers code#

This way, when content in these layers change, the engine only has to re-paint these individual layers and not the entire viewport.Īs a web developer, it can be very useful to know if a part of the page that you intend to animate is, indeed, in its own layer. For example, using a 3D transform property or the will-change property makes the engine create layers. There are specific CSS properties and HTML elements that make the engine decide to create a separate layer.

Finally, paint the page to the screen by using the layout and style information.ĭuring this last step, the engine may decide to paint the page in one go, or to divide it into multiple layers, paint them individually, and then compose the final image from them.Using the above, create a new tree structure that describes the layout of the page, i.e., where, and how big each element on the page is.

#Web page layers code#

Parse the CSS code and get the style and layout information for the page.

Parse the HTML code and build the DOM tree of the page.

To go from HTML and CSS to pixels on a screen, a browser engine needs to go through multiple steps: To understand how layers occur on the web and why they’re important, it’s necessary to know how browser rendering engines work, at a high-level. We introduced a new tab in the 3D View tool, Composited Layers, which helps make sure a web page is broken down in the correct number of layers to have great performance when pieces of it are animated or changing independently of the rest. Debug performance issues with Composited Layers But recently, we have made the tool even more powerful. As we just saw, the 3D View tool is great at quickly spotting common issues and getting you on a path to fixing them.