Thomas Gohard
GitHub: @thomasgohard
Twitter: @thomasgohard
7.2s
960ms
class
or style
attributes
elm.style.border = "1px solid #000"; // reflow + repaint
elm.style.backgroundColor = "#fff"; // repaint
elm.style.color = "#000"; // repaint
elm.style.fontWeight = "bold"; // reflow + repaint
2 reflows, 4 repaints
elm.style.cssText += " border: 1px solid #000; background-color: #fff; \
color: #000; font-weight: bold;"; // reflow + repaint
or
elm.className += " someclassname"; // reflow + repaint
1 reflow, 1 repaint
for (var i = 0; i < 100; ++i) {
// reflow + repaint (offsetLeft), reflow + repaint (style.left)
elm.style.left = elm.offsetLeft + 10 + "px";
}
200 reflows, 200 repaints
elmLeft = elm.offsetLeft; // reflow + repaint
for (var i = 0; i < 100; ++i) {
elmLeft += 10;
elm.style.left = elmLeft + "px"; // reflow + repaint
}
101 reflows, 101 repaints
for (var i = 0; i < 100; ++i) {
elm = parentElm.children[i];
// reflow + repaint (offsetLeft), reflow + repaint (style.left)
elm.style.left = elm.offsetLeft + 10 + "px";
}
200 reflows, 200 repaints
parentElm.style.display = "none"; // reflow + repaint
for (var i = 0; i < 100; ++i) {
elm = parentElm.children[i];
elm.style.left = elm.offsetLeft + 10 + "px";
}
parentElm.style.display = "block"; // reflow + repaint
2 reflows, 2 repaints
var parentElmParent = parentElm.parent;
var parentElmSibling = parentElm.nextSibling;
var parentElm = parentElmParent.removeChild(parentElm); // reflow + repaint
for (var i = 0; i < 100; ++i) {
elm = parentClone.children[i];
elm.style.left = elm.offsetLeft + 10 + "px";
}
// reflow + repaint
parentElmParent.insertBefore(parentElm, parentElmSibling);
2 reflows, 2 repaints
var parentClone = clone(parentElm); // assume clone() creates a deep clone
for (var i = 0; i < 100; ++i) {
elm = parentClone.children[i];
elm.style.left = elm.offsetLeft + 10 + "px";
}
parentElm = parentClone; // reflow + repaint
1 reflow, 1 repaint
Thank you!
Please share and improve this presentation.
Presentation: http://thomasgohard.github.io/optimising-reflows-and-repaints
Source: https://github.com/thomasgohard/optimising-reflows-and-repaints
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License