getBoundingClientRect()
offsetWidth
layout reflow
clientHeight
scrollWidth
getComputedStyle()
😊
Browser
Torture the DOM 💀
Click to see what happens when you measure text the old way
getBoundingClientRect() calls:
0
😊
Browser
Why so many reflows?! 😫
I can't breathe! ðŸ«
Layout thrashing... 💀
DOM:
847
ms
pre
text
💀
Browser
pretext:
0.09
ms
Zero reflows! 🚀
Pure math baby! 🧮
Stop torturing your DOM.
Use pretext. Zero reflows. Pure math.
View on GitHub
Replay 🔄
CA:
145g4Tmx5BVbL6JeJNdqRKmpiCbLADXva4SnPBkhpump
Click to copy