データ バインディングと DOM リフローの例の詳細な説明

データバインディング方法:

1. 要素ノードを動的に作成してページに追加することでデータバインディングを実装します(ulに動的に追加されたliを追加)

var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            oUl.appendChild(oLi)
        }

利点: 必要なコンテンツを追加します元の要素に影響を与えることなく、ページに 1 つずつ動的にバインドされます

欠点: li を作成するたびに、それをページに追加するため、DOM リフローがトリガーされ、最終的にリフローが多すぎて、私たちのパフォーマンス。

2. 文字列の結合方法: 最初にバインドする必要があるデータをループし、次に動的に結合する必要があるラベルを文字列の形式で結合します。 (文字列のスプライシングは、今後の作業でデータをバインドするために最も一般的に使用される方法です)

 str = ""( i = 0;i<ary.length;i++ cur =+="<li>"+="<span>"+(i+1)+"</span>"+=+="</li>"+= str;//oUl.innerHTML(把之前的li以字符串的方式获取到)+str;拼接完成的整体还是字符串
　　　　 最后再把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签

短所: 新しくスプライスされた文字列を ul に追加します 元の li バインド イベントはすべて消えます

利点: コンテンツを事前に結合し、最後にページに追加すると、リフローが 1 回だけトリガーされます

JS の DOM に関する深い知識: リフローは最小限に抑える必要があります

リフロー (リフロー) : ページ内の HTML 構造が変更されると (要素の追加、削除、位置の変更)、ブラウザーは最新の DOM 構造を再計算し、現在のページを再レンダリングする必要があります

再描画: 特定の要素のスタイルが変更された場合 (背景色)、ブラウザは現在の要素を再レンダリングするだけで済みます

3. ドキュメントの断片化:

var frg = document.createDocumentFragment();

ドキュメントの断片の作成は次と同等です。コンテナを一時的に作成しています

for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            frg.appendChild(oLi)
        }
        oUl.appendChild(frg);
        frg = null;

リフローは1回のみで、元のリフローには影響しません

以上がデータ バインディングと DOM リフローの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。