スピードアップしてjavascriptをもっと速く走らせます!

どのようにしてjavascriptをより速く走ることができますか.コツはjavascriptのコンパイル中に少ないリソースを消費することです.つまり、javascriptの実行性能を高めることです.以下、javascriptのプログラミングでよく見られるいくつかの面から説明します.
(一)作用域
Javascriptをマスターするには、javascriptにおける変数の検索メカニズムを理解することが不可欠であり、javascriptでは変数の検索はまず局所範囲から検索され、局所範囲は存在せず、さらに上位の役割ドメインへ検索され、大objectまで検索され、検索されると、対応する値や参照が返され、存在しないとエラーが報告され、小さなU(undefined)が現れる.
役割ドメインについては、実は変数の検索の性能解決であり、主に向上検索に現れている.
例1:

function foo(){
  var a = document.getElementById("a");
  var b = document.getElementById("b");
}

一見すると、以上のプログラムが正しく完成したのは、はい、完全に正確で、きれいなオリジナルjavascriptで、スピードアップである以上、性能をより最適化する方法を考え、以下のように少し修正します.

function foo(){
  var doc = document;
  var a = doc.getElementById("a");
  var b = doc.getElementById("b");
}

皆さんは、これは違いますかと思うかもしれませんが、実は違います.猫は飽きてdocumentに現れます.documentはグローバルオブジェクトです.documentを引用するには一級上を探します.引用するたびに、もう一度検索する必要があります.したがって、documentオブジェクトが取得する検索ごとにdocumentオブジェクトをローカル変数に保存することができ、以降のdocumentオブジェクトの検索ごとに現在のローカル変数を直接呼び出すことができ、メモリを節約することができます.
実は、以上のコードはもっと最適化することができます.白さんたち、手を挙げて、砂糖を食べます.

function foo(){
  var doc = document,
    a = doc.getElementById("a"),
    b = doc.getElementById("b");
}

以上の例では、プログラミングの過程でグローバル変数や上位レベルの変数を参照する必要がある場合、参照回数が多い場合は、この変数をローカル変数として現在の役割ドメインの範囲内に保存することができ、変数に対する数回のクエリーを回避し、コードのパフォーマンスを向上させることができます.ローカル変数の使用はエンジンのゴミ処理を高めることができて、メモリを節約して、どうして喜んでやらないのですか?
(二)オブジェクトの属性
javascriptの中の“すべての対象”、見ているのは簡単で、本当に理解することができて、そして柔軟に運用する境界、あれは私が白さんを待つことができるのではありませんて、ただ見上げるだけです!
オブジェクトがあれば、属性があり、属性があれば、参照があります.そうだ、肝心なのは参照です.
例2:

function foo(){
  var doc = document,
    a = doc.getElementById("a"),
    b = doc.getElementById("b");
    a.style.width = "100px";
    a.style.height = "100px";
    a.style.border = "1px solid red";
}

最適化する前に、javascriptのアルゴリズムの複雑さの問題について理解しておきます.
(1)変数と配列の運用,アルゴリズムの複雑さはO(1)である.
(2)オブジェクトの属性の参照,アルゴリズムの複雑さはO(n)である.
例2から、a.sytleを呼び出す.width,このコードのアルゴリズム複雑度はO(2)であり,2回の属性を参照しているためである.コードで参照されるプロパティが多ければ多いほど、コードに対応するアルゴリズムの複雑さが高くなり、コードのパフォーマンスが低下することがわかります.
以上の簡単な紹介を通じて、皆さんはきっと簡単にこのコードを最適化することができて、引き続きシロを続けて、コードをみんなに貼ります(手の下で情を残して、バナナの皮を投げないでください)
例3:

function foo(){
  var doc = document,
    a = doc.getElementById("a"),
    b = doc.getElementById("b"),
    style = a.style;
    
    style.width = "100px";
    style.height = "100px";
    style.border = "1px solid red";
}

このようにして属性の検索を減らすことができるのではないでしょうか.簡単でしょう.軽くいくつかのコードを叩くと、効果が予想できません.
(三)dom
JAvascriptの作成にはdomの操作が欠かせません.ページの初回レンダリング(render)に成功した後、ページ内のdom構造を操作すると、ページのrepaintまたはreflowになり、repaintおよびreflowプロセスに多くのメモリが消費されます.しかし、repaintとreflowはjavascriptプログラミングでは避けられないので、最適な選択はrepaintとreflowの発生を減らすことしかできません.
(1)ある要素のoffsetWidth,offsetHeight,scrollWidth,scrollHeightなどの属性を取得すると,いずれもドキュメントフローのreflowを促すので,以上の属性値を複数回取得する必要がある場合,reflowの回数を減らすために,初回取得した値を局所変数に格納し,複数回参照してreflowを促す回数を減らすことができる.
(2)ある要素のstyle値を修正するとrepaintがトリガーされ、複数回トリガすると同様にリソースが浪費され、性能に影響する.上記の図例3、例3ではstyleオブジェクトの値を複数回修正することで、以下のようにコードを最適化し、repaintの回数を減らすことができる

function foo(){
  var doc = document,
    a = doc.getElementById("a"),
    b = doc.getElementById("b"),
  style = a.style;

  a.style.display = "none";
  
  style.width = "100px";
  style.height = "100px";
  style.border = "1px solid red";

  a.style.display = "block";
}

上の図から、要素aのstyleオブジェクトを修正する前に要素aを非表示にしてから、aのstyleを修正し、修正が終わったら、aを表示してrepaintの発生を減らすことがわかります.
(3)大量のデータをフロントエンドページに表示し、ドキュメントに大量の要素を追加することを避けられない.要素の追加は同様にreflowを引き起こす.データ量が大きい場合、追加回数は相応に増加し、reflow回数も同様に増加する.以下の図:

function foo(){
  var doc = document, 
    parentNode = doc.getElementById("container");
  for(var i = 0,len = 50; i < len; i ++){
    var a = doc.createElement("div");
    parentNode.appendChild(a);
  }    
}

上の例では、parentNodeに50個のdivを追加する必要があると仮定し、追加するたびにreflowが発生し、追加が完了すると、50回reflowが発生します.もっと良い解決策はありませんか.もちろんあります.下図を見てください.

function foo(){
  var doc = document, 
    fragment = doc.createDocumentFragment,
    parentNode = doc.getElementById("container");
  for(var i = 0,len = 50; i < len; i ++){
    var a = doc.createElement("div");
    fragment.appendChild(a);
  }
  parentNode.appendChile(fragment);    
}

上図から分かるように、まずフラグメントfragmentを作成し、次に追加する必要がある要素をfragmentに追加し、追加が完了した後、fragmengをparentNodeに追加し、reflowは一度にすべての要素をparentNodeの下に追加することができる.
(4)要素を追加する以外に、要素に対する修正も同様にreflowが発生し、解決策は以下の通りである.

function foo(){
  var doc = document, 
    node = doc.getElementById("alter"),
    newNode = node.cloneNode(true);
    
    ..... newNode    ！
    doc.replaceChild(newNode,node);   
}

実は解決策は、修正が必要な要素を先にコピーし、コピー要素を修正し、修正が完了したら元の要素を置き換え、reflowの複数回の発生を減らすことです.
やれやれ、やっと書き終わった.今は吐き気がする.吐き気がすると書いてほしい.みんなに少し助けてほしい.