Faster HTML and CSS: Layout Engine Internals for Web Developers

What people said

Strong rec Chris Calo · 2011-10 · Stack Overflow · on “Describe the page rendering process in a browser?”

An excellent talk by Mozilla's David Baron discusses this in detail. It's a video entitled Faster HTML and CSS: Layout Engine Internals for Web Developers [this video] , and it walks you through the five steps of rendering a DOM tree to the screen: Construct the DOM Calculate styles Construct the rendering tree Compute layout Paint

Recommends Chad Grant · 2009-05 · Stack Overflow · on “How can I get smoother animation for sliding content with JavaScript/jQuery?”

Margin would cause other elements to be recalculated because an element's margin affects the position of other elements around it. Absolute positioning (on its own zIndex) would still cause repaints of other elements, but would be less costly in terms of calculating the objects around it. This talk gives some good insight into how the browser/dom internals work [this video]

Recommends David Baron · 2010-07 · Stack Overflow · on “How does Gecko (or any other layout engine) render a document/page?”

I gave a tech talk [this video] on material that might be useful a few years ago. It wasn't the best of presentations, but I think I did manage to convey some useful information despite that. (Slides at [LINK] or [LINK] .)

Recommends jsea · 2013-10 · Stack Overflow · on “What is the Performance Cost of 'undefined' CSS Properties in the DOM?”

If I'm not mistaken, modern browsers add CSS ID and Class selectors to their own hash maps while parsing the CSS. Then when applying the CSS on HTML elements with an ID, it searches the ID hash map for the ID ( O(1) or O(lg N) complexity depending on browser implementation). (Classes would work the same way.) So actually seeing if there is styling attached to an ID or Class is really quick (constant or logarithmic time). If this is indeed the case, the time spent looking at a bunch of "undefined" IDs and Classes would (in my opinion) be pretty negligible in such a case. This is probably why no one mentions anything about "undefined" ID and Class usage. Here's one website mentioning it. [LINK

Recommends Varvara Stepanova · 2013-10 · Stack Overflow · on “How is the performance when using multiple / double / conditional CSS selectors? For example .hello1.hellob”

Besides "Writing efficient CSS" Mozilla article, you may also be interested in the talk "Faster HTML and CSS: Layout Engine Internals for Web Developers" by Googlers [this video] In general, a browsers reads each selector from right to left and then "calculates" if it is applicable to a current DOM node. This is why the selectors ending with tags or with a lot of cascade cause performance problems, especially on dynamically re-rendered pages. This can be avoided if following BEM CSS recommendations about independent CSS blocks. [LINK]

Recommends swenedo · 2015-10 · Stack Overflow · on “Internet Explorer draws SVG incorrectly when updating xlink:href for a <use> element”

This happens in IE when updating xlink:href="..." , but also when updating clip-path=url(...) . The problem is that the DOM isn't up to date and needs to be refreshed, which can be forced manually. To force an update (an immediate, synchronous reflow or relayout), you can read an element property like offsetTop . This forces the browser to repaint the element before it can give you the offsetTop value. This is mentioned in this talk: Faster HTML and CSS: Layout Engine Internals for Web Developers [this video] (at 37:10) I use this function, and whenever I have changed an svg I call this. function repaintThisElement(element){ var tmp = 0; if (navigator.appName == 'Microsoft Internet Explorer'){ tm

Cites ChrisW · 2009-09 · Stack Overflow · on “Forcing a DOM refresh in Internet explorer after javascript dom manipulation”

Mozilla (maybe IE as well) will cache/delay executing changes to the DOM which affect display, so that it can calculate all the changes at once instead of repeatedly after each and every statement. To force an update (to force an immediate, synchronous reflow or relayout), your javascript should read a property that's affected by the change, e.g. the location of someSpan and otherSpan. (This Mozilla implementation detail is mentioned in the video Faster HTML and CSS: Layout Engine Internals for Web Developers [this video] .)

Cites Knu · 2011-01 · Stack Overflow · on “Lots of DOM. Hidden vs display none”

Imagine a painting. You have a white background and start drawing an apple with a lot of details for one hour and then you completely cover it with another coat of white paint. That's visibility . display:none is like not drawing it from the start. Of course it's faster on first load. There are drawbacks when you are using display:none though: when you are switching it back to block (or inline etc), you will have to start drawing the painting; but using visibility, the browser is just scratching the last coat of paint and it's back. So visibility is faster in this case. But remember one thing when you are using visibility:hidden - the element retains its position in the flow so the elements

Cites Willem · 2011-08 · Stack Overflow · on “Does the order of rules in a CSS stylesheet affect rendering speed?”

After some more testing and reading I came to the following conclusion, no , it does not matter. Even after some ‘extreme’ testing, I could not find anything that supports the idea that the order matters. There were no 'flashed of unstyled content' or the likes, it just took way longer to load the page ( way way longer :D ) Tests I ran I created a test page with 60.000 div elements, each having a unique ID attribute. Each of these ID’s had their own css rule applied to it. Below that I had a single span element with a CLASS attribute, which was also had a css rule linked to it. These tests created a html file of 2MB with a corresponding css file of 6MB. At first I attempted these tests with