JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ

2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ

[anatoo]

気晴らしで書いた奴公開した >JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて

[Rockridge]

「Forced Synchronous Layoutとは、JavaScriptと同期する形で実行されるレイアウト計算処理」であり、ループ内などで発生すると「レイアウト計算が何度も繰り返し起こるのでJavaScriptのパフォーマンスが大幅に劣化する事がある」。

[reboot_in]

“Forced Synchronous Layoutは、ドキュメントのDOMツリー内でDOM操作を行った後、そのDOM要素のレイアウト情報を参照するコードを書くと起こる”

[idr_zz]

あーgetElementByIdが早いというよりそもそもDOMが遅い？ JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ

[hush_in]

わかりやすい

[nitoyon]

offsetWidth による Forced Synchronous Layout

[wordi]

JavaScriptのDOM操作のパフォーマンス内訳について

[nextmedia]

“JavaScriptでのDOM操作自体は大して重くない。重く見えるのはDOM操作に伴うレンダリング処理がJavaScriptの実行後に行われるからである。”

[amino_acid9]

「DOM操作自体は大して重くない。重く見えるのはDOM操作に伴うレンダリング処理がJavaScriptの実行後に行われるから」

[efcl]

forルール内でのstyle変更みたいなのをForced Synchronous Layoutというのか

[kozy4324]

ほぇー、ウェブインスペクタでForced Synchronous Layoutが発生したかどうかも分かるのか

[kosh04]

“JavaScriptでのDOM操作自体は大して重くない。重く見えるのはDOM操作に伴うレンダリング処理がJavaScriptの実行後に行われるからである。”

[naga_sawa]

レイアウトに関わるDOM操作をした直後にレイアウト絡みのプロパティに触ると刺さる

[taketyan]

勉強になった / 内容関係ないけど 2003 年頃のはてダってデフォルトはこういうデザインじゃなかったっけ

[teracy_junk]

『JavaScriptでのDOM操作自体は大して重くない。重く見えるのはDOM操作に伴うレンダリング処理がJavaScriptの実行後に行われるからである』

[jinjor]

レンダリングまで含めてDOM重いと言ってる事が多いかも。

[ledsun]

なるほど。通常、レンダリングはJavaScript実行後に行われる、気にしなくていい。DOMの幅、高さを取ると強制的にレンダリングしJavaScriptの実行も遅くなる。単発なら微々たるもの、ループでやると大幅なパフォーマンス低下

[khtokage]

なんとなくそうじゃないかなーと思いながらコードは書いてたけど、profileで見れるのか、知らなかった。 JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて

[ysk_lucky-star]

これはVirtual DOMでもどうにもならない問題だよね

[vvakame]

ほぇー

[delphinus35]

なるほど……これはｼﾗﾝｶｯﾀ。必読

[itochan]

ディスクアクセスのバッファとかキャッシュとかFlushするとかそういうやつ

[tofu-kun]

すごいわかりやすい

[clavier]

JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ

[cpw]

知らんかった、、、

[raimon49]

Forced Synchronous Layout　Chromeの開発者ツールで確認可能

[teramako]

あとDOMはシングルスレッドでないとダメな部分が多いのも拍車をかけてる

[t-murachi]

innerHTML に直接 HTML 書き殴るのとの比較論かと思ったら違った。レイアウトの強制同期が発生するケースについては個人的にも経験があって、文字数に応じて横幅の変わる DIV とか作ろうとしてハマるポイントだったりする。

[t_f_m]

"例えば、iOSやAndroidなどのモバイル端末で60FPSのアニメーションを達成しようとすると、LayoutやPaintなどの処理をやってたら速度的にちょっときつくなるのでなるべく最後のComposite Layersだけが実行されるようなコードを記述"

[ebo-c]

ある意味遅延評価なのか。appendしたulにliを一個ずつ追加するコードとか重そう

[berlysia]

この辺の話、結構わかっていない人が多いのでやる人は一読すべきである

[Cald]

“Forced Synchronous Layoutとは、JavaScriptと同期する形で実行されるレイアウト計算処理のことである。通常このレイアウト計算は、JavaScriptの実行が終わってから初めて行われるので、JavaScriptの実行を遅くしたりするわけではな