3 ms·
And are none of them cached? If I go var w = element.clientWidth; var h = element.clientHeight; Is that 2 reflows or 1? var w1 = element1.clientW
by greggman 11y ago
And are none of them cached? If I go
var w = element.clientWidth;
var h = element.clientHeight;
Is that 2 reflows or 1?
var w1 = element1.clientWidth;
var h1 = element1.clientHeight;
var w2 = element2.clientWidth;
var h2 = element2.clientHeight;
Is this 4 reflows, 2, or 1?
---
reading this article (https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en https://developers.google.com/web/fundamentals/performance/r...) it sounds like it's 0 reflows if nothing has changed. In other words it's all cached
- dmethvin 11y agoIf the layout isn't "dirty" from a change, then it doesn't need to reflow.
- paulirish 11y agoThey cause immediate reflow only if the DOM is dirty. In both cases it'd be a maximum of 1. This'd be 2: element.textContent = 'omg'; var w = element.clientWidth; elem.classList.add('ok'); var h = element.clientHeight;
- jffry 11y agoAnd it's especially bad if you interleave them all: var heights = lotsOfElements.map(function(el){ el.classList.add('ok'); return el.clientHeight; }); Better is to batch the DOM updates and reads, where you can: lotsOfElements.forEach(function(el){ el.classList.add('ok'); }); var heights = lotsOfElements.map(function(el){ return el.clientHeight; });