Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

There doesn't seem to be a definition of layout thrashing anywhere on the internet. Googling "what is layout thrashing" returns nothing.

Anyone want to offer the net's very first ever explicit definition of this term?



When interleaved DOM queries and modifications in your JS cause the DOM to be successively invalidated and then laid out again, multiple times within a single script.

Modern browsers use a dirty-bit system for DOM modifications: they don't perform a layout every time it's changed, they just note the change and then perform the layout when the script returns. However, if the DOM is queried in the meantime, they have to perform layout, because otherwise they won't have up-to-date dimensions and positions. So if you interleave queries with modifications, the dirty bit gets set, the DOM gets laid out, the dirty bit gets set, the DOM gets laid out, etc, defeating all the optimizations browser vendors have put in place.

Layout is an expensive operation, too - on a moderately complex website like Google Search it takes about 17ms on desktop, and that can increase by 10x on mobile devices. 170ms is well past the point of visual perception.


> on a moderately complex website like Google Search

Oh how times have changed.


Thank you.


I may be responsible for the term "layout thrashing" and tried to explain it in a blog post a while back: http://kellegous.com/j/2013/01/26/layout-performance/


It's not a formal term; the author was just drawing the parallel between memory + disk thrashing and the DOM + layout thrashing. Basically slowdown due to excessive reads and writes/redundantly moving data back and forth.


People have called it other things in the past. Google calls it "redundant layout" in this article: https://developers.google.com/web-toolkit/speedtracer/speed-...




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: