CSS 性能分析器？答案

【问题标题】：CSS Performance Profiler?CSS 性能分析器？
【发布时间】：2011-07-07 14:02:10
【问题描述】：

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

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

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

【问题讨论】：

因此看起来流氓 CSS 规则仅适用于 IE9。没错，IE7/8 在此页面上击败了 IE9。我使用几个干净的虚拟机仔细检查了这个结果。唯一落后的环境是 IE9。 ://
另外一个有趣的点是在IE9中切换到IE7或IE8模式消除了瓶颈。

标签： css performance internet-explorer profiler

【解决方案1】：

所以，我终于开始编写一个 JavaScript 函数，它索引页面上的所有 CSS 类，然后在滚动页面时单独切换它们。这立即确定了错误的类，并且从那里，我能够确定错误的属性。结果表明，border-radius 在包含许多子元素的元素上（例如身体级别 div）在 IE9 上的表现难以置信。

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

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

【讨论】：

干得好！这也解释了为什么切换到 IE7/IE8 会使其运行更快。

【解决方案2】：

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

第

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

【讨论】：

谢谢，我忘记了 Page Speed。尽管这不是我真正想要的，但它很有帮助。
您可以做的一件事就是确定有问题的区域是评论一半的css，测试它，评论下半部分。当你找到减慢速度的一半时，重复但在那一半。然后你会发现花时间的规则。只是另一个想法，而我有一个谷歌给你:)
奇怪的是我似乎无法缩小范围......几乎就像每条规则都同样降低了性能。 ://

【解决方案3】：

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

如果您没有找到，需要手动查找的内容包括

任何filter 语句（经典的alpha=opacity 和其他 - IE 有许多非常高级的图形过滤器，非常昂贵）
巨大的元素（比如数千个像素）
巨大的背景图片 - 可能暂时将它们全部删除？

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

【讨论】：

感谢 Pekka，但实际上禁用不透明度是我做的第一件事。虽然它帮助了一些人，但仍然存在滞后。
@Andy 是的，你已经提到了不透明度 - 抱歉，过度阅读了。

【解决方案4】：

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

经过一番探索性工作后，我发现消除所有 box-shadow CSS 行可以显着提高性能。我有来自横幅、表格、框和标签的阴影，每一个都只有少量的阴影和模糊，但显然足以让 IE9 变得喜怒无常。

【讨论】：

在移除单个 115px 嵌入框阴影（在透明覆盖 div 中）时，我在 nexus 4 上对 chrome mobile 进行了大幅改进。移除较小的阴影会带来相应较小的性能提升。

【解决方案5】：

Chrome 开发工具曾经包含一个 CSS Selector Profiler 来做这类事情。你可以看到它的屏幕截图in this blog post。

Chrome 团队 pulled the feature in Chrome 30 声明：

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

因此，我认为 CSS 选择器分析器并不像 [可能已经] 使用的那么有用，并且可以安全地删除。这也将减少尝试对已经很快的选择器进行微优化的开发人员。

您可以尝试使用旧版本的 Chrome 来解决问题，但我建议您查看当前版本的 Chrome 开发工具的 Timeline tab，它会告诉您 Chrome 花了多长时间计算样式（影响选择器性能的地方）、布局和绘制页面。

【讨论】：

【解决方案6】：

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

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

【讨论】：