如何调试CSS3渲染?

Goo*_*bot 9 html css firefox css3

我有很大的CSS规则,主要基于CSS3过渡.

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

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

像firebug这样的常用工具只显示总渲染时间,并且不显示哪个进程(DOM及其CSS规则)缓慢且阻塞.

如何在FireFox的CSS渲染中找到缓慢的过程?

mor*_*wry 5

不,不幸的是,我们现在没有比试错更好的东西(见这里).Chrome的原生开发工具目前为我们提供了有关渲染的最完整信息,而且据我所知,这是他们获得的最常见的请求之一.

就第三方工具而言,衡量这一点的工具相对较少.我知道过去2我不再使用(http://ejohn.org/blog/browser-paint-events/http://www.browserscope.org/reflow/about).大多数情况下,这些可以帮助您了解重新喷涂或回流时的情况,并估算它们需要多长时间.

然而,CSS Paint TimesProfiling CSS的乐趣和利润提到了通过属性进行分析的方法,但是,如果你看一下,也不是你希望看到的.

有没有明确的方法来衡量"绘画时间"的表现?以及 如何衡量浏览器布局性能 提供相关信息.

另请参阅http://jankfree.org/,它具有最新信息,并且没有指向自动执行当前反复试验方法的工具的链接.