From IT Skills
Jump to: navigation, search




First the JavaScript runs, then style calculations, then layout. It is, however, possible to force a browser to perform layout earlier with JavaScript. It is called a forced synchronous layout. The first thing to keep in mind is that as the JavaScript runs all the old layout values from the previous frame are known... Running the style calculations and layout synchronously and earlier than the browser would like are potential bottlenecks

how does Chrome turn the DOM into a screen image?[edit]

Conceptually, it:

  • Takes the DOM and splits it up into layers
  • #Paints each of these layers independently into software bitmaps
  • Uploads them to the GPU as textures
  • Composites the various layers together into the final screen image.


done by CPU - recalculating of the elements’ geometry

left top


done by CPU - rendering of the image

color	border-style
visibility	background
text-decoration	background-image
background-position	background-repeat
outline-color	outline
outline-style	border-radius
outline-width	box-shadow


done by GPU


Changes to opacity can be handled by the GPU if the element the only one in the #Layer

It’s a giant hack. You won’t find anything (at least for now) in the W3C‘s specifications about how compositing works, about how to explicitly put an element on a compositing layer or even about compositing itself. It’s just an optimization that the browser applies


Chrome paints the contents of a layer into a software bitmap before uploading it to the GPU as a texture. If that content doesn’t change in the future, it doesn’t need to be repainted.

We can move layers around, too, which makes them very useful for animation.

layer creation is triggered:

  • 3D or perspective transform CSS properties
  • <video> elements using accelerated video decoding
  • <canvas> elements with a 3D (WebGL) context or accelerated 2D context
  • Composited plugins (i.e. Flash, <iframe>)
  • Elements with CSS animation for their opacity or using an animated transform
  • Elements with accelerated CSS filters
  • Element has a descendant that has a compositing layer (in other words if the element has a child element that’s in its own layer)
  • Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
  • position: fixed; will-change;

Pages in category "Frame to browser screen"

The following 4 pages are in this category, out of 4 total.