私は現在、修士論文のコードに取り組んでいます。効果的な DOM 操作についていくつか質問があります。
1) 互いに近接している多数のノードで一連の DOM 操作を実行する必要があると考えてください。これらすべてのノードの最上位のparentNodeのディープコピーを作成し（DOMの外部に保持し）、そのサブツリーで操作を実行してから、DOMの対応するノードと交換することは理にかなっていますか. これにより、ブラウザのリフロー/再レンダリングが最小限に抑えられますか?
2) ノードの innerHTML を変更すると、サブツリーを操作するよりもパフォーマンスが向上しますか?
3) バニラ javaScript (フレームワーク/ライブラリなし) での効率的な DOM 操作について、他に良いアドバイスはありますか?
前もって感謝します！
過剰なブラウザ レンダリングを防ぐために行うべき最も重要なことは、読み取りと書き込みを確実にグループ化することです。
複数のノードに対して何かを行う必要があり、それらから何かを読み取る必要がある場合は、最初にすべてのノードから読み取り、次にすべてに書き込む必要があります。
DOM の仕組みは、DOM から読み取る必要があるたびに、DOM が変更されたかどうかをチェックするというものです。そうであった場合、ブラウザは再レンダリングします。
したがって、最初にすべての要素を選択し、取得する必要がある情報をキャッシュしてから、それらすべてに設定します。
1) Consider you had to perform a bunch of DOM manipulation on a number of nodes that are close to each other. Would it make sense to make a deep copy of the topmost parentNode of all of those nodes (and keep it outside the DOM), perform the manipulations on that subtree and then swap it with it's counterpart in the DOM. Would this minimize browser reflow/re-rendering?
Yes - do the changes on the counterpart
2) Is changing the innerHTML of a node more/less performant than manipulating it's subtree?
More performant - because you do the stringmanipulation outside dom
3) Is there any more good advice you can give me on efficient DOM manipulation in vanilla javaScript (without any frameworks/libraries)?
document.createDocumentFragment() is the best fully controllable virtual dom ever