[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社

DOMの規格にはRangeというクラスがあります。ドキュメント上の選択範囲などを表すのに便利なクラスです。 ついさっき、このクラスにまつわるパフォーマンス問題を解決したので記事に残そうと思います。 removeChild()が重い？ とあるDOM操作を行う処理のパフォーマンスが悪い、というチケットが立てられたのが発端でした。 最初にその部分を実装したのが私で、そこまでチューニングをしっかりしていた訳ではなかったのでまあそんなこともあるかな、と思いながらとりあえずパフォーマンス計測を行ってみたところ、appendChild()が実行時間の9割以上を占めているという結果でした。 appendChild()がなんでそんなに遅いんだろう？ appendChild()は親ノードの子のリスト末尾に1個ノードを追加するだけの処理です。普通に考えてこれだけではそこまで遅くなるとは思えない。 appendC

[teramako]

detatch使えないんだ…知らなかった。 しかし解決方法がバッドノウハウっぽくて他の方法を探したくなるなあ

[efcl]

DOM RangeはLiveなので開放しないと選択してるDOMのアップデートが重くなる問題

[latena]

こんなに遅くなるなんて興味深い。しかしそんなたくさん Range 使うってどんなユースケースだろ。インスタンス使い回せないのかな。

[l08084]

Range、使い方がまずむずい。もっと解説のドキュメント増えてほしい

[n2s]

id:teramako さんと同じ感想…正直うえっとなる / ループ内でconst range = ...とかやってたんですかね？＞id:latena