2

私は自分のウェブサイトでいくつかのパフォーマンスチェックを行っており、タイムラインを使用すると、ボトルネックの可能性について警告が表示されますが、それを解決する方法は実際には説明されていません.

これは私のタイムラインに表示されるものです：

ここに画像の説明を入力

Large image link: http://i.stack.imgur.com/RdzvI.jpg

setCenterこのコードを持つ関数が表示された場合:

function setCenter(div){    
    var testH = document.getElementById(div).offsetHeight;
    var testW = document.getElementById(div).offsetWidth;
    var height = settings.height;
    var width = settings.width;

    var temp = Math.floor( (height / 2)- ( test / 2 )) + 'px'; 
    document.getElementById(div).style.marginTop = temp;    

    var temp = Math.floor( (width / 2)- (  testW /2 )) + 'px'; 
    document.getElementById(div).style.marginLeft = temp;
}

ボトルネックについてこのような警告を表示する機能の何が問題なのですか? これ以上優れたソリューションは他にありません。

これを解決するために私が何をする必要があるかを誰かが説明できますか?

4

1 に答える 1

2

ブラウザーでは、DOM からの読み取りと書き込みは本質的に低速です。Nicholas Zakas は彼の著書High Performance Javascriptで、これについて第 3 章で詳しく説明しています。彼が指摘する DOM 対話を高速化する 1 つの方法は、すべての読み取りをまとめて実行し、次にすべての書き込みをまとめて行うことです。それを考慮すると、関数は次のようになります。

function setCenter(div){
    var div = document.getElementById(div);    // only read this once and store it
    var testH = div.offsetHeight;
    var testW = div.offsetWidth;
    var height = settings.height;
    var width = settings.width;

    // Do some logic
    var marginTop = Math.floor( (height / 2)- ( testH / 2 )) + 'px';
    var marginLeft = Math.floor( (width / 2)- (  testW /2 )) + 'px';  

    // Batch DOM update
    div.style.marginTop = marginTop;
    div.style.marginLeft = marginLeft;
}

これで、DOM から 1 回だけ (4 回ではなく) 読み取り、2 回書き込みますが、書き込みもグループ化され、計算ロジックによって分離されるのではなく、ブラウザーがリフロー プロセスでまとめてバッチ処理できる場合があります。

于 2013-06-19T00:10:25.397 に答える