如何调试CSS3渲染？ [英] How to debug CSS3 rendering?

问题描述

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

当我检查一个典型的页面的渲染时间与在线工具，如webpagetest.org或开发工具像firebug;在各种浏览器中的呈现时间极为不同。例如，MSIE：1.5s，Chrome：2.5，FireFox：47.0。

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

像firebug这样的常用工具只显示总渲染时间，并不显示哪个进程（DOM及其CSS规则） p>

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

解决方案

不，不幸的是，我们现在没有比尝试和错误更好的东西（查看此处）。 Chrome的本地开发工具目前为我们提供了关于渲染的最完整的信息，根据我所听到的，这是他们得到的最常见的请求之一。

第三方工具，那些测量这一点的工具都相对罕见。我知道过去2次我不再使用（ http://ejohn.org/blog） / browser-paint-events / 和 http://www.browserscope.org/reflow/about ）。大多数情况下，这些帮助你知道什么时候重绘或回流发生，估计总共需要多长时间。

但是， CSS Paint Times 和
剖析CSS的乐趣和利润提到了通过属性做分析的方法，但是，如果你看，两者都不是你希望看到的。

< a href =http://stackoverflow.com/questions/14048825/is-there-a-definitive-way-to-measure-time-to-paint-for-performance>是否有确定的方法来衡量涂漆时间性能？和
如何衡量浏览器布局的性能< a>
提供相关信息。

另请参阅 http：/ /jankfree.org/ ，其中包含最新信息，并且没有链接到自动执行当前试验和错误方法的工具。

I have large CSS rules which are mainly based on CSS3 transitions.

When I check the rendering time for a typical page with online tools like webpagetest.org or developer tools like firebug; the rendering time is extremely different in various browsers. For example, MSIE: 1.5s, Chrome:2.5, FireFox:47.0.

How can I debug which part of my CSS has caused unusual problem in FireFox?

Common tools like firebug only shows the total rendering time, and does not show which process (DOM and its CSS rule) is slow and blocking.

How to find the slow process in CSS rendering of FireFox?

解决方案

No, unfortunately, we don't have anything much better than trial-and-error right now (see here). Chrome's native dev tools currently give us the most complete information about rendering and, from what I've heard, that's one of the most common requests they get.

As far as third party tools, ones that measure this at all are relatively rare. I knew of 2 in the past that I no longer use (http://ejohn.org/blog/browser-paint-events/ and http://www.browserscope.org/reflow/about). Mostly these help you know when repaints or reflows happen and estimate how long they take total.

However, CSS Paint Times and Profiling CSS for fun and profit mention ways to do profiling by property, but, if you look, neither is probably what you're hoping to see.

Is there a definitive way to measure "time to paint" for performance? and How to measure browser layout performance provide related information.

Also see http://jankfree.org/, which has up-to-date information and no links to a tool that automates the current trial-and-error approach.

这篇关于如何调试CSS3渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！