CSS性能分析器？
我目前正在一个网站上工作，并在我的样式表大量的东西，在IE中杀死性能。 那里有没有好的CSS分析器？ 我想要一个可以查明正在杀死性能的规则的工具。
在你问之前，我已经禁用了JavaScript，不透明和盒子阴影/文字阴影规则。 该页面仍然是跳动。 ：/如果我禁用所有的CSS，它运行良好。
我需要一个工具来分析页面并报告CSS瓶颈。
所以，我终于开始编写一个JavaScript函数，它将页面上的所有CSS类索引，然后单独切换它们，同时滚动页面。 这立即指出了错误的类，并从那里，我能够确定错误的财产。 原来，包含很多孩子（如身体级别的div ）的元素的border-radius在IE9上的performance难以置信 。
我已经开始为我的CSS压力testinggithub回购： https ： //github.com/andyedinborough/stress-css
从那里，你可以安装一个书签，轻松地在任何页面上运行testing。
Google的Page Speed插件有一个分析你的CSS的部分，告诉你一些效率低下的select器，或许从这里开始？
心连心
注：我知道它是一个Firefox插件，但应该帮助优化一下:)
嗯，从来没有听说过这样的工具。
如果你没有发现，手动的东西将包括
-
任何
filter语句（经典的alpha=opacity和其他 – IE有一些非常先进的graphicsfilter是非常昂贵的） -
巨大的元素（如数千像素大）
-
巨大的背景图像 – 可能会删除所有片刻？
我强烈怀疑第一点 – 阿尔法透明胶片可能是一个可怕的渲染瓶颈，特别是在较旧的系统。
我目前正在从事的一个Web项目也有性能问题。 它运行在Firefox，Chrome，甚至IE8。 在IE9中，它陷入了泥潭。
经过一些侦探工作后，我发现消除所有的盒子阴影的CSS线大大提高了性能。 我有来自横幅，桌子，盒子和标签的阴影，每一个都有微妙的阴影和模糊，但显然足以让IE9得到所有的喜怒无常。
Chrome开发工具用于包含一个CSS Selector Profiler来完成这种事情。 你可以在这个博客文章中看到它的截图。
Chrome团队在Chrome 30中提到了这一function ：
CSSselect器匹配现在对于绝大多数常用select器来说相当快，而这些select器在实施剖析器时过去很慢。 这个时间也包含在时间线“重新计算风格”事件中。
因此，我相信CSSselect器分析器并不像已经使用过的那样有用，并且可以安全地丢弃。 这也将减less开发人员试图微调已经很快的select器的比例。
您可以尝试使用旧版本的Chrome来深入了解问题，但是我build议您查看当前版本的Chrome开发工具的时间轴选项卡 ，其中会显示Chrome用于计算样式的时间（其中select器性能受到影响），布局和绘制页面。
Opera正在其profiler中进行css分析。
可以按照此页面上的步骤启用它。 然后打开分析器，开始分析，并刷新你想分析的页面。 完成渲染后停止分析，然后显示结果。
