CSS性能分析器？

我目前正在一个网站上工作，并在我的大量样式表中的某个地方，在IE中查杀性能。那里有没有好的CSS分析器？我希望有一款工具可以查明那些会影响性能的规则。CSS性能分析器？

在您提问之前，我禁用了JavaScript，不透明度和box-shadow/text-shadow规则。该页面仍然很激动。：/如果我禁用所有的CSS，它运行良好。

我需要一个工具来分析页面并报告CSS瓶颈的位置。

所以它看起来好像流氓CSS规则IE9只。没错，IE7/8在这个页面上关闭了IE9。我使用一对干净的虚拟机仔细检查了这个结果。唯一落后的环境是IE9。：/ – 2011-03-02 22:29:59

另一个有趣的问题是，在IE9中切换到IE7或IE8模式消除了瓶颈。 – 2011-03-02 23:39:34

所以，我终于可以写一个JavaScript函数索引我所有的CSS类的对页面，然后单独切换它们，同时滚动页面。这立即指出了错误的类，并从那里，我能够确定错误的财产。对于包含许多孩子的元素（例如，身体级别div），出现border-radius难以置信地执行在IE9上表现不佳。

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

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

2011-04-14 17:57:08

干得好！这也解释了为什么切换到IE7/IE8使其工作更快。 – 2011-04-24 20:19:04

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

如果你发现没有，事情看出来的手工将包括

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

2011-03-02 20:43:13

谢谢佩卡，但禁用不透明实际上是我做的第一件事情之一。虽然它帮助了一些，但仍然存在滞后。 – 2011-03-02 20:51:43

@恩，是的，你提到不透明已经 - 重读，抱歉。 – 2011-03-02 20:54:32

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

心连心

注：我知道它是Firefox的插件，而应帮助优化了一下:)

2011-03-02 20:50:21

谢谢，我已经忘记了Page Speed。尽管这不是我正在寻找的东西，但它很有帮助。 – 2011-03-02 21:06:05

你可以做的事情之一是识别有问题的区域是评论一半的css，测试它，评论下一半。当你发现减慢速度的一半时，重复，但在那一半。然后你会发现花时间的规则。只是另一个想法，虽然我有一个谷歌你:) – 2011-03-02 21:21:53

奇怪的是，我似乎无法缩小它...几乎就像每条规则同样有辱人格的表现。：/ – 2011-03-02 23:34:22

Opera正在试验其profiler中的css配置文件。可以启用following the steps on this page。然后打开分析器，开始分析，并刷新你想分析的页面。在渲染完成后停止分析，然后显示结果。

2012-10-16 06:11:12 lulalala

我目前正在从事的一个Web项目也有性能问题。它在Firefox，Chrome甚至IE8中运行良好。在IE9中，它陷入了泥潭。

经过一番侦查工作，我发现，消除所有的box-shadow CSS线提高了性能增色不少。我有来自横幅，桌子，盒子和标签的阴影，每个阴影都有微妙的阴影和模糊，但显然足以让IE9变得喜怒无常。用于包含CSS选择器探查这样做只是这样的事情

2013-06-03 21:50:51 Chordian

我删除了单个115像素插入框阴影（在透明覆盖div中）时，nexus 4上的chrome mobile有了很大的改进。去除较小的阴影给予比例较小的性能改进。 – 2014-02-15 12:35:35

的Chrome浏览器开发工具。你可以看到它的屏幕截图in this blog post。

CSS选择器匹配现在是相当快的绝对多数曾经是在分析器执行的时间慢共同选择的。这一次也包含在时间线“重新计算风格”事件中。

因此，我认为，CSS选择器探查是不是有用呢[可能已被用作主并可以安全地被丢弃。这也会减少开发人员试图微调已经很快的选择器的比例。

您可以尝试使用旧版本的Chrome浏览挖成问题，但我建议考虑看看当前版本的Chrome浏览器开发工具与Timeline tab将显示您的Chrome多久采取计算样式（选择器性能受到影响），布局和绘制页面。

2014-03-13 09:50:27 nikmd23

回答