在Javascript中有沒有一種方法來定時瀏覽器重排？

我需要能夠以基準基於Webkit的瀏覽器的特定構建和我測量的時間長度需要做某些東西一樣DOM操作，內存限制等在Javascript中有沒有一種方法來定時瀏覽器重排？

我有一個測試，低於該記錄同時加載10個相當重的PNG圖形所需的時間。在代碼中，我需要能夠計算負載完成需要多長時間。我已經嘗試在動態Image對象上設置 onLoad函數來產生以ms爲單位的時間。然而，正如下面的上限所示，它給出了一個不準確的讀數，因爲它給出的讀數只是一小部分，因爲它只記錄負載的數據傳輸部分，然後當存在一個相當大的（3000 + ms）延遲時圖像可見 - 環形藍色，這是瀏覽器迴流循環。

在webkit中是否存在一些事件我可以使用它來記錄瀏覽器何時完成迴流，以便可以對此進行基準測試？我必須能夠以毫秒爲單位記錄的代碼，因爲我正在測試的webkit的構建沒有開發人員工具。我可以觀察到Chrome的差異，但兩種版本之間的性能差異很大，我需要能夠對其進行精確量化以進行比較。

image benchmark

來源

2012-05-28 giles

在小範圍內，您可以使用屏幕捕獲軟件，並（手動）找到加載圖像的位置。 –

這個優秀的[文章]（http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/）關於迴流/重繪提及[SpeedTracer]（http://code.google.com/webtoolkit/speedtracer/）爲webkit - 可能有幫助嗎？ –

如果您正在使用jQuery，你可以嘗試記錄document ready和window load之間的時間，這會給你一個近似值。

(function(){ 
    var start, end; 

    $(document).ready(function(){ 
     start = new Date()  
    }); 
    $(window).load(function(){ 
     end = new Date(); 
     console.log(end.getTime() - start.getTime()); 
    }); 

}());

編輯：

你已經採取了看看Browserscope reflow timer？基本上它會檢查瀏覽器在更改dom後將控制權返回給JavaScript引擎需要多長時間。根據該頁面，它應該在任何瀏覽器中工作，儘管我沒有親自測試它。也許你可以調整測試期間運行的代碼來計算頁面中的重排時間。

來源

2012-05-28 16:01:02

產生與img.load相同的結果 - 它在文件完成下載時觸發，但在瀏覽器迴流開始 - >完成之間仍存在很大的不定時暫停 – giles

此外，你可能想看看CSS壓力測試。小書籤非常適合頁面性能測試。 http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

如何將PNG設置爲div background-image並運行壓力測試，它應該使用定時多次啓用/禁用圖像。

來源

2012-08-29 19:57:27 Paul

在Javascript中有沒有一種方法來定時瀏覽器重排？

回答

相關問題