CSS性能分析器？

我目前正在一个网站上工作，在我大量的样式表中，有什么东西正在破坏IE的性能。有没有好的CSS分析器？我想要一个工具，可以精确地找出破坏性能的规则

在您提问之前，我已经禁用了JavaScript、不透明度和框阴影/文本阴影规则。页面仍然不稳定。：/如果我禁用所有CSS，它运行得很好

---

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

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

如果找不到，手动查找的内容将包括

• 任何

  filter

  语句（经典的

  alpha=opacity

  和其他-IE有许多非常昂贵的高级图形过滤器）

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

• 巨大的背景图像-可能暂时将它们全部移除

我强烈怀疑第一个点-alpha透明胶片可能是一个可怕的渲染瓶颈，尤其是在较旧的系统上。

谷歌的插件有一个部分分析CSS并告诉您低效的选择器，也许从这里开始

嗯

---

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

因此，我终于开始编写一个JavaScript函数，对页面上的所有CSS类进行索引，然后在滚动页面时单独切换它们。这个pin立即指向了错误类，从那里，我可以确定错误属性。结果表明，在包含多个子元素的元素上（例如主体层

div

）的

边界半径

在IE9上的性能非常差

我已经为CSS压力测试启动了github repo：

---

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

Opera正在其分析器中尝试css评测

可以启用它。 然后打开探查器，开始分析，并刷新要分析的页面。

---

渲染完成后停止评测，然后将显示结果。

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

---

经过一些调查工作后，我发现消除所有框阴影CSS行大大提高了性能。我有来自横幅、表格、盒子和标签的阴影，每一个都有轻微的阴影和模糊，但显然足以让IE9变得情绪化。

Chrome开发工具用于包含CSS选择器分析器，用于完成这类工作。你可以看到它的屏幕截图

Chrome团队表示：

CSS选择器匹配现在对于绝大多数公共选择器来说相当快，而在分析器实现时，这些选择器通常比较慢。此时间也包含在时间轴“重新计算样式”事件中

因此，我相信CSS选择器探查器并没有它（可能）曾经使用过的那么有用，可以安全地删除它。这也将减少开发人员尝试微优化已经很快的选择器的比例

---

您可以尝试使用旧版本的Chrome来深入研究这个问题，但我建议您查看一下当前版本的Chrome开发工具，它将显示Chrome计算样式（选择器性能受到影响）、布局和绘制页面所花的时间。

谢谢Pekka，但禁用不透明度实际上是我做的第一件事。虽然它帮助了一些人，但仍然有一个滞后。@Andy是的，你已经提到了不透明度-请过目，抱歉。谢谢，我已经忘记了页面速度。尽管这不是我真正想要的，但它很有帮助。你可以做的一件事是对css的一半进行注释，测试，然后对下一半进行注释，这将识别出问题区域。当你发现那一半会减慢速度时，重复这一半。然后你会发现需要花费时间的规则。还有一个想法，我为你准备了一个谷歌：）奇怪的是，我似乎无法缩小范围。。。几乎每一条规则都会同样降低性能：/因此，似乎流氓CSS规则仅适用于IE9。没错，IE7/8在这一页上把IE9的门打开。我使用两个干净的虚拟机仔细检查了这个结果。唯一落后的环境是IE9/另一个有趣的点是，在IE9中切换到IE7或IE8模式可以消除瓶颈。干得好！这也解释了为什么切换到IE7/IE8会让它工作得更快。我在Nexus4上的chrome mobile上做了一个巨大的改进，删除了一个115px的嵌入框阴影（在一个透明的覆盖div中）。移除较小的阴影会相应地降低性能改进。