Chrome時間軸中的JS瓶頸

我一直在我的網站上進行一些性能檢查，並使用時間表對可能出現的瓶頸提出警告，但並未真正解釋如何解決此問題。Chrome時間軸中的JS瓶頸

這是我在我的時間線看到：

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; 
}

到底是什麼功能錯誤給我一個關於瓶頸的警告？我看不到任何其他解決方案會更好。

有人可以解釋我需要做什麼來解決這個問題嗎？

來源

2013-06-18 Sir

除非您認爲您的網站的性能正在成爲問題，否則您無需解決它。 'setCenter'調用了很多元素，並在實際的常見操作中調用？時間表表示它耗時4毫秒，所以目前看起來並不是問題，因此是警告而不是錯誤。不過，如果可能的話，您可能會考慮使用CSS來尋找更好的居中方法。 – Ryan

嗯，我不認爲有一個CSS解決方案，因爲JS填充div，所以我需要首先得到div的維度，然後居中......但這意味着無效的佈局是什麼？ – Sir

'offsetHeight'和'offsetWidth'使瀏覽器重新計算佈局，以確保您獲得正確的值。無論這是否是一個我不能說的問題。 –

從DOM讀取和寫入在瀏覽器中本質上很慢。 Nicholas Zakas在他的書High Performance Javascript中詳細討論了這一點。第3章提到了一種加速DOM交互的方法，他指出要完成所有的讀操作，然後將所有的寫操作放在一起。考慮到這，你的功能可能反而看起來就像這樣：

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讀取一次（而不是4倍），並寫了兩次，但你寫亦自一起瀏覽器可以將能夠在迴流過程中一起批量生產，而不是通過計算邏輯進行分離。

來源

2013-06-19 00:10:25 skyline3000

啊，我看到了，雖然它的offsetHeight它不滿意，我是否應該通過獲得其填充/邊距並進行計算來計算它的真實偏移量？ – Sir

可能，我會試驗並嘗試。我可以告訴你的是，每次你檢查其中一個值（offsetHeight，offsetWidth，clientHeight，clientWidth，scrollHeight，scrollWidth）時，它會強制瀏覽器重排。 – skyline3000

我認爲JSPerf是有序的！：）謝謝（你的）信息！ – Sir

Chrome時間軸中的JS瓶頸

回答

相關問題