4 ms·
Could anyone explain like I'm 5 what "layout thrashing" is? As far as I understand, it's when the size of an element is set in the CSS, like div {
by Kluny 11y ago
Could anyone explain like I'm 5 what "layout thrashing" is? As far as I understand, it's when the size of an element is set in the CSS, like
div {
width:100px;
}
Then later in the CSS it's changed to
div .biggerdiv {
200px;
}
Or maybe it's javascript that changes it:
$('.biggerdiv').style('width:200px;');
but either way it's when an element has some size near the beginning of rendering, then as more information becomes available, it has to change size a few times.
Am I getting it?
- troels 11y agoLayout thrashing is when the browser layout engine does some work to render the page, but then something changes and it has to do it over again. A typical case is if you have a loop in javascript wherein you both read and write to the dom. For example, if you change the css style of an element and then afterwards try to read its position property. Because changing the style might have affected the position, the browser will have to render parts or whole of the page in order to give you that information. It's a very easy mistake to make and it's not obvious what you have done if you don't look for it. And in the context of page load, it would be if the dom is changed in many different places (So yes, your example would probably cause layout thrashing).