2013-11-04 31 views
9

我有大型CSS規則,主要基於CSS3轉換。如何調試CSS3呈現?

當我使用webpagetest.org等在線工具或firebug等開發工具檢查典型頁面的渲染時間時,渲染時間在各種瀏覽器中差別很大。例如,MSIE:1.5s,Chrome:2.5,FireFox:47.0。

如何調試我的CSS的哪一部分在FireFox中引起異常問題?

像螢火蟲這樣的常用工具只顯示整個渲染時間,並沒有顯示哪個進程(DOM及其CSS規則)緩慢且阻塞。

如何在FireFox的CSS渲染中找到緩慢的過程?

+0

你確實證實這確實是一個可重現的問題?如何重現和玩的例子? – nmaier

+0

@nmaier我發現這個問題(重複的小背景在FF中不起作用),但是我的問題是一般的。我通過反覆試驗發現了這個問題,但爲此目的應該有一個更系統的方法/工具。 – Googlebot

+0

我只是好奇。你有沒有[提交錯誤](https://bugzilla.mozilla.org/enter_bug.cgi)?如果沒有,那麼你可能應該如果沒有一個。 – nmaier

回答

5

不,不幸的是,我們現在沒有什麼比試錯更好的了(see here)。 Chrome的原生開發工具目前爲我們提供了最完整的渲染信息,而據我所知,這是他們得到的最常見的請求之一。

就第三方工具而言,衡量這一點的工具相對來說比較少見。我以前知道我不再使用(http://ejohn.org/blog/browser-paint-events/http://www.browserscope.org/reflow/about)。大多數情況下,這些信息會幫助您瞭解重新繪製或迴流情況,並估計它們需要花費多少時間。

然而,CSS Paint TimesProfiling CSS for fun and profit提及方式由物業辦分析,但是,如果你看一下,無論是大概你希望看到什麼。

Is there a definitive way to measure "time to paint" for performance? and How to measure browser layout performance 提供相關信息。

另請參閱http://jankfree.org/,其中包含最新信息並且沒有指向自動執行當前試錯方法的工具的鏈接。