CSS Performance Profiler？

Question

我目前正在一个网站上工作,在我的大量样式表中的某个地方,有些东西在IE中杀死了性能.有没有好的CSS剖析器？我想要一个可以查明破坏性能的规则的工具.

在你提问之前,我已经禁用了JavaScript,不透明度和box-shadow/text-shadow规则.页面仍然是跳跃的.:/如果我禁用所有CSS,它运行良好.

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

Answer 1

所以,我终于开始编写一个JavaScript函数,在页面上索引我的所有CSS类,然后在滚动页面时单独切换它们.这立刻引发了错误的阶级,从那里,我能够确定错误的财产.事实证明,border-radius在包含许多孩子的元素(例如身体水平div)上,IE9上的表现非常糟糕.

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

从那里,您可以安装书签,以便在任何页面上轻松运行测试.

Answer 2

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

心连心

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