9

我有主要基于 CSS3 转换的大型 CSS 规则。

当我使用webpagetest.org 等在线工具或firebug 等开发人员工具检查典型页面的渲染时间时；各种浏览器的渲染时间差别很大。例如，MSIE：1.5s，Chrome：2.5，FireFox：47.0。

如何调试我的 CSS 的哪一部分在 FireFox 中引起了异常问题？

像 firebug 这样的常用工具只显示总渲染时间，并没有显示哪个进程（DOM 和它的 CSS 规则）是慢的和阻塞的。

如何找到 FireFox 的 CSS 渲染中的慢进程？

4

1 回答 1

5

不，不幸的是，我们现在没有什么比试错更好的了（见这里）。Chrome 的原生开发工具目前为我们提供了关于渲染的最完整信息，据我所知，这是他们收到的最常见的请求之一。

就第三方工具而言，完全衡量这一点的工具相对较少。我过去知道我不再使用 2 个（http://ejohn.org/blog/browser-paint-events/和http://www.browserscope.org/reflow/about）。大多数情况下，这些可以帮助您了解重绘或重排何时发生并估计它们总共需要多长时间。

然而，为了乐趣和利益， CSS Paint Times和 Profiling CSS提到了按属性进行分析的方法，但是，如果你看的话，这两种方法都不是你希望看到的。

是否有一种确定的方法来衡量性能的“绘制时间”？和 如何衡量浏览器布局性能 提供了相关信息。

另请参阅http://jankfree.org/，其中包含最新信息，并且没有指向自动化当前试错方法的工具的链接。

于 2013-11-11T14:34:24.237 回答