衡量單個CSS規則對頁面渲染速度的影響的工具？

我看到LinkedIn的新的HTML5的iPad應用程序擺脫了圓潤的邊框，即border-radius:X px，提高自己的網頁渲染速度。這似乎只能提供一點小小的改進。我更想知道如何衡量各種CSS規則對網站性能的影響。是否有用於CSS的microtime()？衡量單個CSS規則對頁面渲染速度的影響的工具？

更新我跑由@valentinas建議的性能測試：http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

雖然這確實爲我的網頁類的測量，我更希望比較規則1與規則2對於給定的元素。但是，下面是數據。我的網站使用Twitter Bootstrap.css及其許多類選擇器。以下是我難以解釋的數據快照。可能有人以此爲出發點？

.... 
Selector   # Elms. # Child.  Delta Total 
Removing #back-top 1 2 saves 7.17ms 3.90ms 
Removing .container-fluid 1 414 saves 7.15ms 3.93ms 
Removing .oGreen 1 0 saves 7.14ms 3.94ms 
Removing .row-fluid 2 316 saves 7.07ms 4.00ms 
Selectors Tested: 128 
Baseline Time: 11.08ms 
Num. Tests: 120

來源

2012-05-03 tim peterson

謝謝，我會看看這個書籤，你將能夠指向我的最佳實踐總結的不僅僅是'邊界radius'更多？ –

有許多工具可用於測試加載和應用CSS的實際性能影響。這就是說，對於你特別提到的事情，他們特別難以測試。

有經驗的CSS開發人員所遇到的研究顯示，圓潤取樣器和CSS3的盒子陰影可能導致的性能問題「，但在這種情況下他們更具體談論頁面響應或如何快速的頁面響應用戶操作。

讓我解釋一下，在更多的細節。在談論頁面呈現速度有多快或CSS和圖片資源需要多長時間才能下載並提供給客戶端時，有許多不同工具可以提供的清晰度量標準。 HTTP請求和響應時間是可測量的，從最初請求到DOM準備就緒的時間也是可測量的。問題在於，當您開始查看頁面響應時，所有這些易於度量的事情都已經發生。這些問題將與您的特定應用程序功能，功能和樣式相關，並且只能以特定於應用程序的方式進行測試。

作爲一個例子，存在已經顯示，在某些情況下，CSS3箱陰影可能導致頁面或用戶動作和事件完成之間一定的滯後時間上非平滑滾動研究。最簡單的測試方法是手動測試帶有和不帶有陰影的頁面，以便您可以直觀地看到差異。現在，如果你知道box-shadow已知會導致某些問題，這可能是你想要測試的東西，但是對於那些發表了關於這個特定問題的研究和發現的人，這幾乎肯定不是他們看起來的東西首先。這是他們通過反覆試驗發現的。

最終，真正的答案是經驗：已通過問題的工作，並添加到您自己的集體知識。閱讀討論這些問題的博客和其他資源可以爲此提供幫助。

來源

2012-05-03 22:10:21

感謝馬修，你能評論我最近更新的問題嗎？ –

從我可以發現，該書籤索引的所有網頁上的CSS類的，然後逐個切換他們，而滾動頁面，以確定何時去除類增加了頁面響應速度。它看起來像是回收了匹配元素的數量，這些元素中子元素的數量，基線時間以及刪除後的時間。它確定了可以爲提高性能而刪除的類，但實際上並沒有告訴你爲什麼。這是爲了讓你從結果中找出答案。 –

嗨馬特，我很困惑算法返回的數據值。例如，對於作爲我的主要容器之一的'.row-fluid'，「316保存」意味着什麼？這是否意味着我在此容器中有316個子元素？ –

衡量單個CSS規則對頁面渲染速度的影響的工具？

回答

相關問題