如何測量瀏覽器佈局性能

Question

我正在解決大型Web應用程序中的性能迴歸問題。我最近做了一些更改以刪除IFRAME，並將內容直接放入原始DOM中，以使性能更好。事實上，初始加載時間更好，但我發現了一個奇怪的問題。

看來，各種佈局（動畫和滾動）的變化要慢很多，這iframe刪除。我縮小了它知道它不是JavaScript。

我已經刪除了定時器和事件上運行的所有JavaScript。

簡單地設置一個具有1秒CSS過渡的元素的類名，會改變其style.top和style.left，我可以看到性能下降。 （它已經絕對定位）。這個元素非常緩慢地動畫到新的位置..似乎是大約5-10 FPS，而IFRAME則是40+ FPS。

所以 - 我想知道是否有某種方法來衡量實際的瀏覽器佈局性能。我在Safari，IE，Firefox和Chrome上全面看到了這個問題 - 因此任何這些都可以使用（儘管我更喜歡Firefox，因爲問題似乎在這裏最爲明確）。

Answer 1

一個好地方開始 - Speed Tracer和Page Speed。他們會告訴你很多關於你的佈局如何影響性能的有用信息，以及你可以做些什麼來改進它。雖然Speed Tracer是一款Chrome擴展程序，但其數據也將反映其他瀏覽器的性能。

Answer 2

下面是瀏覽器本身一個非常有趣的測試：在網絡上

Maze Solver: CSS3 Layout Performance Test

性能是多維的。在這個測試中，我們專注於瀏覽器佈局引擎，以實現瀏覽器對CSS 2.1和CSS 3佈局結構的處理。這些結構用於HTML樣式，佈局引擎是整個Web瀏覽器性能的重要組成部分。

此外，這個測試是針對瀏覽器本身，而不是你的代碼，如果我理解正確的話，這個測試就是你要找的。