今さらながら、ブラウザ・レンダリングについてお勉強。

JavaScript最適化手法について調べてたら、こんなサイトが。
10 Javascript Performance Boosting Tips from Nicholas Zakas

こちらの、9. Stop touching the DOM, damnit! に興味深いことが書いてありました。

DOM operations are resource-heavy because of reflow.

リンク先はmozilla.orgです。
mozilla.org: Notes on HTML Reflow
英語だし、難しいなぁ。

と、思ったらステキな記事発見！
ReFlowの原因とマークアップの最適化
メモめも！

ブラウザ上の表示はHTML, CSS, JavaScript…etcが絡み合っています。
レンダリングの仕組みを理解し最善を尽くすことがUI, Designにたいすることと同様に求められているようです。

動かすDOMはposition:absolute, fixedにしてDOM treeの描画構造から切り離した方が良いと何となく知ってたけど、こういう理屈だったのね。
マークアップエンジニアを名乗るなら、いやWeb制作を生業にするなら知ってないといけないことなのかもです。
あらためて奥深さにふれ身が引き締まる思いです。

【参考】
dev.opera.com: Efficient JavaScript: Repaint and reflow

ブラウザ動作の理解－リフローとリペイント及びその最適化

Reflows & Repaints: CSS Performance making your JavaScript slow?

Rendering: repaint, reflow/relayout, restyle

developers.google.com: Minimizing browser reflow