フロントエンドフラグメントのパフォーマンスの最適化

私たちのブラウザーはますます多くの機能を実装しており、ネットワークは徐々にモバイルデバイスに移行しているため、フロントエンドコードはよりコンパクトになり、最適化の方法はますます重要になっています。フロントエンドが強力なのは、最も理想的なフロントエンドのパフォーマンスを保証できるようにする多くの単純な戦略とコードの習慣があり得るということです。このシリーズのテーマは、9種類のコードのヒントを紹介することであり、既存のコードを最適化するのにわずか1分しかかかりません。

複雑な要素の注入の代わりにDocumentFragmentsまたはinnerHTMLを使用する

DOM操作はブラウザで課税されます。パフォーマンスの改善はブラウザーで行われますが、DOMは非常に低速です。気付かないと、ブラウザーの実行が非常に遅いことに気付く場合があります。これが、集中化されたDOMノードの作成と迅速な注入を減らすことが非常に重要である理由です。

次に、ページに<ul>要素があり、AJAXを呼び出してJSONリストを取得し、JavaScriptを使用して要素のコンテンツを更新するとします。通常、プログラマは次のように記述します。

var list = document.querySelector（ 'ul'）; 
ajaxResult.items.forEach（function（item）{ 
    // <li>要素を作成する
    var li = document.createElement（ 'li'）; 
    li.innerHTML = item.text; 

    // <li>クラスの追加、属性の変更、イベントリスナーの追加などの要素の一般的な操作
    。// 

    <li>要素を親<ul>にすばやく挿入する。list.apppendChild（li）; 
}）;

上記のコードは実際には間違った記述方法です。各リストでDOM操作を使用して<ul>要素を移植するのは非常に遅くなります。本当にdocument.createElementを使用してオブジェクトをノードとして扱いたい場合は、パフォーマンスの問題にDocumentFragementを使用する必要があります。

DocumentFragementは、一連の子ノードの「仮想ストレージ」であり、親ラベルはありません。この例では、DocumentFragementを非表示の<ul>要素と想定し、DOMの外部では、DOMに挿入されるまで子ノードを保持します。次に、元のコードをDocumentFragmentで最適化できます。

var frag = document.createDocumentFragment（）; 

ajaxResult.items.forEach（function（item）{ 
    // <li>要素を作成
    var li = document.createElement（ 'li'）; 
    li.innerHTML = item.text; 

    // < li>要素の一般的な操作
    //たとえば、クラスの追加、属性の変更、イベントリスナーの追加、子ノードの

    追加など
    。// <li>要素をフラグメントに追加frag.appendChild（li）; 
}）;