The important thing to know is that repaints only affect elements that are on the same layer as the changed node. We can see repaints for example when altering a `background-color` or a `box-shadow` property. Repaints are introduced when our changes influence only Paint properties - both Paint and Compositing are bound to be triggered. For example, Reflows can be forced by changing a `display` property, appending an element to the document or animating the element’s size or position. Reflows happen when we introduce changes that force the browser to recalculate positions or geometry of elements - triggering the Layout, Paint and Compositing step. scrolling, triggering an animation), the browser needs to create a series of frames to represent that change. But if any change is introduced to the interface (e.g. The layers are placed together and finally shown on the screen.Īll of this work happens when we want to show just one frame to the user. The rasterized elements are put on “layers” (by default only one layer, unless there is a reason to move them away - more about that later). Once that part is done, the browser takes these vector boxes and rasterizes them (exchanges vectors to pixels) in a “Paint” step. This phase is called “Layout”, and at this point elements are only represented as vector boxes. LayoutĪfter the DOM (Document Object Model) is created and the styles are recalculated, the browser takes a moment to figure out how much space each visible HTML node is about to take and where it is going to be placed. Reflows and repaintsĪlright, so what exactly are reflows and repaints? To understand the concept fully, it’s best to start with a bit of a background on how the browser renders the page. “WHY?!” I’d bet my unfinished pack of nachos that in most cases the problem lies in the content reflows and repaints. You used the newest tech stack, the load time is shorter than for any page of that kind and the first meaningful paint is visible in the blink of an eye.Īnd yet, when you try to actually USE that website, it’s painful. So there you are, at wits’ end, frustrated after hours of trying to find out why your beautifully crafted website is so slow to browse. Eliminate content repaints with the new Layers panel in Chrome Anna Migas Follow Designer and Frontend Developer at Lunar Logic.

Page layers for windows