CSS性能分析器？

Question

55

我正在开发一个网站，但在我的大量样式表中，某些内容会导致IE的性能变差。请问是否有好用的CSS分析器？我需要一款可以准确定位导致性能下降的规则的工具。

在您询问之前，我已经禁用了JavaScript、opacity和box-shadow/text-shadow规则，但页面仍然很卡顿。:/如果我禁用所有CSS，它就可以正常运行。

我需要一款可以对页面进行分析并报告CSS瓶颈位置的工具。

- Andy Edinborough

看起来这些不合规的CSS规则只在IE9上出现。没错，在这个页面上，IE7/8比IE9更好。我使用了几个干净的虚拟机再次确认了这个结果。唯一有延迟的环境是IE9。 :/ - Andy Edinborough

另一个有趣的点是，在IE9中切换到IE7或IE8模式可以消除瓶颈。 - Andy Edinborough

6个回答

6

谷歌的Page Speed插件有一个分析您的CSS并告诉您有关低效选择器的部分，也许可以从那里开始？注意：我知道它是Firefox插件，但应该有助于优化一点 :)

- Stuart Blackler

1

谢谢，我忘记了页面速度。虽然它并不是我正在寻找的东西，但确实很有帮助。 - Andy Edinborough

1

你可以尝试的一件事情是注释掉一半的CSS代码，测试它，然后注释掉另外一半。当你找到减慢速度的那一半时，请在该半部分重复这个过程。接下来，你会找到花费时间的规则。这只是我为你谷歌时想到的另一个想法 :) - Stuart Blackler

奇怪的是我似乎无法缩小范围...就像每个规则都会降低性能一样。 :/ - Andy Edinborough

3

哦，我从未听说过这样的工具。

如果找不到任何工具，需要手动查找的内容包括：

我强烈怀疑第一点 - alpha透明度可能会导致可渲染性变差，特别是在旧系统上。

- Pekka

谢谢Pekka，但实际上禁用不透明度是我做的第一件事。虽然它有所帮助，但仍然存在滞后问题。 - Andy Edinborough

@Andy 是的，你已经提到了不透明度 - 我看漏了，抱歉。 - Pekka

2

我目前正在进行的一个Web项目也存在性能问题。在Firefox、Chrome甚至IE8中运行良好，但在IE9中却变得很慢。

经过一些调查工作，我发现消除所有box-shadow CSS行可以显著提高性能。我有来自横幅、表格、框和选项卡的阴影，每个阴影都只有微小的模糊效果，但显然足以让IE9变得不稳定。

- Chordian

当我移除一个单独的115px内阴影（在一个透明覆盖层div中）时，我在Nexus 4上的Chrome移动版有了显著的改善。移除较小的阴影会相应地带来较小的性能提升。 - Amir Arad

1

Chrome开发工具曾经包含一个CSS选择器分析器，用于执行此类操作。您可以在此博客文章中查看其屏幕截图。

Chrome团队在Chrome 30中删除了该功能，并表示：

引用：

对于大多数过去缓慢的常见选择器，现在CSS选择器匹配速度已经足够快。这个时间也包括在时间轴“重新计算样式”事件中。

因此，我认为CSS选择器分析器不像以前那么有用，可以放心地删除。这也将减少试图微调已经快速选择器的开发人员的比例。

您可以尝试使用旧版Chrome来深入了解问题，但我建议您查看当前版本的Chrome dev工具的时间轴选项卡，它将显示Chrome计算样式（影响选择器性能）、布局和绘制页面所花费的时间。

- nikmd23

0

Opera正在其分析器中尝试使用CSS分析功能。

您可以按照此页面上的步骤启用它。然后打开分析器，开始分析，并刷新要分析的页面。在渲染完成后停止分析，然后结果将显示出来。

- lulalala

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy Edinborough · Accepted Answer

所以，我终于写了一个JavaScript函数，对页面上的所有CSS类进行索引，并逐个切换它们，在滚动页面时。这立即确定了错误的类，然后我能够确定错误的属性。结果发现，在包含许多子元素的元素上（例如，div元素），在IE9上使用border-radius效果非常差。

我已经为我的CSS压力测试创建了一个Github存储库：https://github.com/andyedinborough/stress-css

从那里，你可以安装一个书签工具，方便地在任何页面上运行测试。