Webページのリフローと再描画

リフロー(reflow):
HTML構造が変化すると、ブラウザは最新のDOM構造を再計算し、現在のページを再レンダリングする必要があります.
再描画(repaint):
要素の背景色、テキスト色、枠線色などを変更して、その周囲や内部レイアウトのプロパティに影響を与えない場合は、ブラウザは現在の要素を再レンダリングするだけです.
還流は避けられないものであり、還流による影響を以下の方法で低減することができます.
1.cssでは不要な複雑なセレクタ、特に子孫セレクタの使用は避けます.これは、セレクタに一致するためにより多くのパフォーマンスを消費するためです.
2.複雑な操作が頻繁に使用される場合、position:absolute/fixed位置決めを使用してみます.あるいはdisplay:noneは,ドキュメントストリームから離れて操作し,操作が完了してからドキュメントストリームに入る.
3.jsを使用して要素スタイルを変更する場合は、属性を変更するのではなくclassをできるだけ直接変更します.
4.より優れたデータバインド方式を採用
次のデータバインド方法を比較します.
①動的バインドが必要なコンテンツを1つずつページに追加

const ul = document.getElementById('ul')
for (let i = 0; i < arr.length; i++) {
    let cur = arr[i];
    let li = document.createElement('li');
    li.innerHTML = ""+(i+1)+""+cur.title；
    ul.appendChild(li)；
}

利点:元の要素には何の影響もありません
欠点:liを作成するたびに、ページに追加し、DOMの還流を開始し、最後に還流を開始する回数が多すぎて、パフォーマンスに影響します.
②文字列をつづり、最後にページに追加

const ul = document.getElementById('ul')
let str = "";
for (let i = 0; i < arr.length; i++) {
    let cur = arr[i];
    str += "
";
    str += ""+(i+1)+""；
    str += cur.title;
    str += "
"
}
ul.innerHTML += str;

利点:1回のリフローのみを開始
欠点:新しいつなぎ文字列をulに追加すると、元のliバインドのイベントが消えてしまいます.
③DocumentFragmentでは、DocumentFragmentノードはドキュメントツリーに属しません.DocumentFragmentノードをドキュメントツリーに挿入するように要求すると、DocumentFragment自体ではなく、そのすべての子孫ノードが挿入されます.この機能により、DocumentFragmentはプレースホルダとなり、ドキュメントを一度に挿入したノードを一時的に格納します.追加するコンテンツをfrgに保存し、ページに追加できます.

const ul = document.getElementById('ul')
let frg = document.createDocumentFragment();
for (let i = 0; i < arr.length; i++) {
    let cur = arr[i];
    let li = document.createElement('li');
    li.innerHTML = ""+(i+1)+""+cur.title
    frg.appendChild(li);
}
ul.appendChild(frg);
frg = null;            //     

利点:1回のリフローのみで、元の方法には影響がなく、前の2つの方法よりもよく、データをバインドすることでページレンダリングを最適化できます.