【JavaScript】JavaScriptを高速化するプログラミングテクニック

JavaScriptの処理を早くする方法について調べてみました。
調べて、覚えておくとよさそうな事をまとめてみました。

１．length の参照を減らす
for (var i = 0, len = elements.length; i < len; i++) {
    ：
}
２．ドット演算を減らす
要素の設定をまとめる。
【悪い例】

function BuildUI(){
    var nameElement = document.getElementById('name');
    nameElement.innerHTML =  '';            
    nameElement.innerHTML += "T";  
    nameElement.innerHTML += "A";   
    nameElement.innerHTML +="の日記"; 
}

【良い例】 
function BuildUI(){
    var elementText = "T"+ "A"+ "の日記";

    document.getElementById('name').innerHTML = elementText;
}

3．関数ポインタをキャッシュする
Work関数はグローバルスコーブで定義されている関数とする。
全ての参照（ポインタ）をローカル変数のfuncWorkに格納し、ループ内でそのローカル変数を使って関数を呼び出すことでパフォーマンスが向上する。
function funcCollection(){
    var funcWork = Work；  //ローカル変数
    var length = myCollection.getItemCount();
    for(var index = 0; index < length ; index++)
        funcWork (myCollection[index]);
    }
}
 

4．文字列結合する場合は、+= じゃなくて join 使う
function test () {
    var html = []; 
    for (var i = 0; i < 5; i++) { 
       html.push('あ'); 
    } 
   $('tx').innerHTML = html.join("");
};
 

5．配列に要素を追加するのはpushよりlengthを使う
【悪い例】 
 ary.push("a");
【良い例】 
 ary[ary.length]="a"

6．DOMに要素追加する場合、複数の要素をまとめて追加する（置き換えもまとめて行う）

7．複数のスタイルの書き換え
スタイル変更は纏めて行う
【悪い例】
element.style.background = ‘gray’;
element.style.border = ‘1px solid black’;
【良い例】 
 element.setAttribute(‘style’, ‘background: gray; border: 1px solid gray;’);

8．htmlファイルの読み込みは、CSSファイルを先に、javascriptファイルを後に記述する

9. 出来る範囲で、関数呼び出しを避ける

10. newを使わずに、〔〕や{}といった括弧を用いて配列やオブジェクト生成を指定する 

11. メソッドチェーンを活用する

【参考URL】
その他、以下URL参考になります
https://html5experts.jp/yoshikawa_t/1016/
https://html5experts.jp/yoshikawa_t/1932/
http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/top-10-reasons-javascript-blocking-page-load/
http://buzzmemo.blogspot.jp/2010/08/javascript.html
http://itpro.nikkeibp.co.jp/article/COLUMN/20080109/290747/?rt=nocnt
https://www.ibm.com/developerworks/jp/web/library/wa-aj-jsajaxperf/
https://www.inter-office.co.jp/contents/177/

http://news.mynavi.jp/news/2009/11/11/015/
http://gihyo.jp/dev/serial/01/js-foundation/0007
http://www.atmarkit.co.jp/fwcr/design/index/index_htmltuning.html
 
http://www.atmarkit.co.jp/ait/articles/1409/02/news032.html
http://qiita.com/redamoon/items/1c38ee93834588e3c4ff