html - 如何调试CSS3渲染？

Question

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

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

如何调试我的 CSS 的哪一部分导致了 FireFox 中的异常问题？

firebug等常用工具只显示总渲染时间，并没有显示哪个进程(DOM及其CSS规则)缓慢阻塞。

如何发现 FireFox 的 CSS 渲染过程缓慢？

Answer 1

不，不幸的是，我们现在没有比反复试验更好的方法 (see here)。 Chrome 的原生开发工具目前为我们提供了关于渲染的最完整信息，据我所知，这是他们收到的最常见的请求之一。

就第三方工具而言，能够对此进行测量的工具相对较少。我过去知道我不再使用 2(http://ejohn.org/blog/browser-paint-events/ 和 http://www.browserscope.org/reflow/about)。大多数情况下，这些可以帮助您了解重绘或回流发生的时间，并估计它们总共需要多长时间。

然而，CSS Paint Times和 Profiling CSS for fun and profit提到了按属性进行分析的方法，但是，如果您仔细观察，可能都不是您希望看到的。

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

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