JavaScript性能最適化技術

6755 ワード

DOM最適化
DOMとJavaScript

ブラウザは、domとjsを独立に二つの独立した小島のように実現します.

js操作domは島から別の島まで

です.

domの性能島と島の間の橋は、毎回「橋渡り」を取ることによって、できるだけ橋を渡る回数を減らすことができます.

inners HTMLとdomメソッド比較

window.onload = function() {
 // 1.   js+dom  
 // 2.    js          dom  。
    var oDiv = document.getElementById('divTyping');
    var str = "";
    // console.time('hello');
    // for (var i = 0; i < 5000; i++) {
    //     oDiv.innerHTML += 'a';
    // }
    // console.timeEnd('hello'); //         ：166.23779296875ms;

    console.time('hello');
    for (var i = 0; i < 5000; i++) {
     str += 'a';
    }
    oDiv.innerHTML = str;
    console.timeEnd('hello'); //         ：0.22900390625ms;
}

  ：           2     。

window.onload = function() {
    // 1.   dom     
    // 2.   javascript     
    var oUl = document.getElementById('ul1');
    var str = "";

    // console.time('hello');
    // for (var i = 0; i < 5000; i++) {
    //     var oLi = document.createElement('li');
    //     oUl.appendChild(oLi);
    // }
    // console.timeEnd('hello'); // 

    console.time('hello');
    for (var i = 0; i < 5000; i++) {
     str += '';
    }
    oUl.innerHTML = str;
    console.timeEnd('hello'); 
}

chrome：dom    innerHTML    
     ：innerHTML  dom

减少DOM操作

节点克隆

cloneNode

window.onload = function() {
    // cloneNode    
    var oUl = document.getElementById('ul1');
    var str = "";

    // console.time('hello');
    // for (var i = 0; i < 5000; i++) {
    //     var oLi = document.createElement('li');
    //     oLi.innerHTML = 'li';
    //     oUl.appendChild(oLi);
    // }
    // console.timeEnd('hello'); //       ：22.596923828125ms;

    console.time('hello');
    var oLi = document.createElement('li');
    oLi.innerHTML = 'li';
    for (var i = 0; i < 5000; i++) {
        var newLi = oLi.cloneNode(true);
        oUl.appendChild(newLi);
    }
    console.timeEnd('hello'); //       ：5.889892578125ms;
}

  ：cloneNode

要素セットにアクセスし、できるだけ局所変数

window.onload = function() {
        //          
        var oUl = document.getElementById('ul1');
        var str = "";

        var aLi = oUl.getElementsByTagName('li');
        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oLi.innerHTML = 'li';
            oUl.appendChild(oLi);
        }

        // console.time('hello');
        // for (var i = 0; i < aLi.length; i++) {
        //     aLi[i].innerHTML = 'li';
        // }
        // console.timeEnd('hello'); //       ：hello: 882.308837890625ms,         2000 ms;

        console.time('hello');
        var len = aLi.length;
        for (var i = 0; i < len; i++) {
            aLi[i].innerHTML = 'li';
        }
        console.timeEnd('hello'); //       ：hello: 842.797119140625ms，         1800 ms；
    }

  ，        ，

要素ノードは、できるだけ要素だけを取得するノード方法

1.           ，                      。
childNodes firstChild -->     、    
children firstElementChild -->

APIを選択し、querySelector、querySelectorAll

並べ替え:ページの内容を変更する
エグゼクティブ:ブラウザ表示内容

追加順序は、動作

window.onload = function() {
        var oUl = document.getElementById('ul1');

        console.time('hello');
        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oUl.appendChild(oLi);
            oLi.innerHTML = 'li';
        }
        console.timeEnd('hello'); //     ：32.947021484375ms

        // console.time('hello');
        // for (var i = 0; i < 5000; i++) {
        //     var oLi = document.createElement('li');
        //     oLi.innerHTML = 'li';
        //     oUl.appendChild(oLi);
        // }
        // console.timeEnd('hello'); //     ：27.43798828125ms
    }

複合dom動作は、cssTest

window.onload = function() {
        //          
        var oUl = document.getElementById('ul1');

        // console.time('hello');
        // for (var i = 0; i < 5000; i++) {
        //     var oLi = document.createElement('li');
        //     oLi.style.width = '100px';
        //     oLi.style.height = '100px';
        //     oLi.style.backgroundColor = 'red';
        //     oUl.appendChild(oLi);
        // }
        // console.timeEnd('hello'); //     ：17.507080078125ms

        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oLi.style.cssText = 'width:100px;height: 100px;background-color:red;';
            oUl.appendChild(oLi);
        }
        console.timeEnd('hello'); //
    }
    
  ：      ，

キャッシュレイアウト情報

window.onload = function() {
        var oDiv = document.getElementById('box');

        // setInterval(function() {
        //     oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
        //     oDiv.style.top = oDiv.offsetTop + 1 + 'px';
        // }, 30);

        var L = oDiv.offsetLeft;
        var T = oDiv.offsetTop;
        setInterval(function() {
            L++;
            T++;
            oDiv.style.left = L + 'px';s
            oDiv.style.top =  T + 'px';
        }, 30); //       
    }

ファイルの破片createDocktFragment()

window.onload = function() {
        var oUl = document.getElementById('ul1');

        // console.time('hello');
        // fsubor (var i = 0; i < 5000; i++) {
        //     var oLi = document.createElement('li');
        //     oUl.appendChild(oLi);
        // }
        // console.timeEnd('hello'); //     ：6.130126953125ms

        var oFrag = document.createDocumentFragment();
        console.time('hello');
        for (var i = 0; i < 5000; i++) {
            var oLi = document.createElement('li');
            oFrag.appendChild(oLi);
        }
        oUl.appendChild(oFrag);
        console.timeEnd('hello'); //     ：5.923828125ms
    }

Javascript赋価メカニズムの詳細解