CSS Performance Profiler？

Question

我目前正在开发一个网站，而且在我的大量样式表中的某个地方，有些东西正在IE中扼杀性能。有没有好的CSS剖析器？我想要一个可以查明破坏性能的规则的工具。

在你问之前，我已经禁用了JavaScript，不透明度和box-shadow / text-shadow规则。页面仍然是跳跃的。 ：/如果我禁用所有CSS，它运行良好。

我需要一个可以分析页面并报告CSS瓶颈所在的工具。

Answer 1

所以，我终于编写了一个JavaScript函数，它在页面上索引了我的所有CSS类，然后在滚动页面时单独切换它们。这立刻引发了错误的阶级，从那里，我能够确定错误的财产。事实证明，包含许多孩子的元素border-radius（例如，身体级别div）在IE9上执行 难以置信 。

我已经为我的CSS压力测试开始了一个github回购：https://github.com/andyedinborough/stress-css

从那里，您可以安装书签，以便在任何页面上轻松运行测试。

Answer 2

来自Google的Page Speed插件有一个部分可以分析您的CSS并告诉您效率低下的选择器，也许从那里开始？

HTH

注意：我知道它是一个Firefox插件，但应该有助于优化：）

Answer 3

嗯，从来没有听说过这样的工具。

如果您找不到，请手动注意的事项包括

• 任何filter语句（经典alpha=opacity和其他语句 - IE都有许多非常高级的图形过滤器，非常昂贵）

• 巨大元素（如数千像素大）

• 巨大的背景图片 - 可能暂时将它们全部删除？

我强烈怀疑第一点 - 阿尔法透明度可能是一个糟糕的渲染瓶颈，尤其是在旧系统上。

Answer 4

我目前正在处理的Web项目也存在性能问题。它在Firefox，Chrome甚至IE8中运行良好。在IE9中它陷入困境。

经过一些侦探工作后，我发现消除所有盒式阴影CSS线可以大大提高性能。我有横幅，桌子，盒子和标签的阴影，每个都有一些微妙的阴影和模糊，但显然足以让IE9变得情绪化。

Answer 5

用于包含CSS Selector Profiler的Chrome开发工具可用于执行此类操作。您可以看到in this blog post的屏幕截图。

Chrome小组pulled the feature in Chrome 30声明：

  

对于绝大多数常用选择器来说，CSS选择器匹配现在相当快，而这些选择器在分析器实现时曾经很慢。这段时间也包括在时间线＆＃34;重新计算风格＆＃34;事件

     

因此，我认为CSS选择器分析器没有[可能已经]使用的那么有用，可以安全地删除。这也将减少尝试微型优化已经快速选择器的开发人员的比例。

您可以尝试使用旧版本的Chrome来深入研究此问题，但我建议您查看当前版本的Chrome开发工具的Timeline tab，并告诉您多长时间Chrome已经开始计算样式（选择器性能会受到影响），布局和绘制页面。

Answer 6

Opera正在其分析器中试验css分析。

可以启用following the steps on this page。 然后打开探查器，开始分析，并刷新您要分析的页面。 渲染完成后停止分析，然后显示结果。