我目前正在开发一个网站，在我的大量样式表中，有一些东西正在影响 IE 的性能。有没有好的 CSS 分析器？我想要一个可以查明影响性能的规则的工具。
在你问之前，我已经禁用了 JavaScript、不透明度和框阴影/文本阴影规则。页面仍然跳动。 :/ 如果我禁用所有 CSS，它运行得很好。
我需要一个可以分析页面并报告 CSS 瓶颈所在的工具。
I'm currently working on a site, and somewhere in my mass of stylesheets, something is killing performance in IE. Are there any good CSS profilers out there? I'd like a tool that can pinpoint rules that are killing performance.
Before you ask, I've disabled JavaScript, opacity, and box-shadow/text-shadow rules. The page is still jumpy. :/ If I disable all CSS, it runs great.
I need a tool that can profile the page and report where the CSS bottlenecks are.
发布评论
评论（6）
因此，我终于开始编写一个 JavaScript 函数，该函数对页面上的所有 CSS 类进行索引，然后在滚动页面时单独切换它们。这立即查明了错误的类，从那里，我能够确定错误的属性。事实证明，包含许多子元素（例如主体级别
div）的border-radius执行效果令人难以置信 IE9 表现不佳。我已经为 CSS 压力测试创建了一个 github 存储库： https://github.com/andyedinborough/stress- 从那里，您可以安装一个书签
以轻松地在任何页面上运行测试。
So, I finally got around to writing a JavaScript function that indexed all of my CSS classes on the page and then individually toggled them, while scrolling the page. This immediately pin-pointed the errant class, and from there, I was able to determine errant property. Turns out that
border-radiuson an element that contains many children (e.g. a body leveldiv) performs incredibly poorly on IE9.I've started a github repo for my CSS stress test: https://github.com/andyedinborough/stress-css
From there, you can install a bookmarklet to easily run the test on any page.
Google 的 Page Speed 插件有一个部分可以分析您的 CSS 并告诉您效率低下的情况选择器，也许从那里开始？
hth
注意：我知道它是一个 Firefox 插件，但应该有助于优化一点:)
The Page Speed plugin from Google has a section that analyses your CSS and tells you about inefficient selectors, perhaps start there?
hth
Note: I know its a Firefox plugin, but should help optimize a bit :)
嗯，从来没有听说过这样的工具。
如果您找不到任何内容，则需要手动注意的事项将包括
任何
filter语句（经典的alpha=opacity和其他 - IE有许多非常先进的图形化非常昂贵的过滤器）巨大的元素（例如数千像素大）
巨大的背景图像 - 也许将它们全部删除一会儿？
我强烈怀疑第一点 - Alpha 透明度可能是一个可怕的渲染瓶颈，尤其是在较旧的系统上。
Hmm, never heard of such a tool.
If you find none, things to look out for manually will include
Any
filterstatements (the classicalpha=opacityand others - IE has a number of very advanced graphical filters that are extremely expensive)Huge elements (like thousands of pixels large)
Huge background images - maybe remove them all for a moment?
I would strongly suspect the first point - alpha transparencies can be a terrible rendering bottleneck, especially on older systems.
我目前正在开发的一个网络项目也遇到了性能问题。它在 Firefox、Chrome、甚至 IE8 中运行良好。在 IE9 中它陷入困境。
经过一些侦探工作，我发现消除所有 box-shadow CSS 行可以显着提高性能。我有来自横幅、表格、框和选项卡的阴影，每一个都只有少量的阴影和模糊，但显然足以让 IE9 变得情绪化。
I also have performance problems on a web project I'm currently working on. It runs well in Firefox, Chrome, even IE8. In IE9 it bogs down.
After some detective work I discovered that eliminating all box-shadow CSS lines improved performance considerably. I had shadows from banners, tables, boxes and tabs, each with just a subtle amount of shadow and blur, but apparently enough for IE9 to get all moody.
Chrome 开发工具曾经包含一个 CSS 选择器分析器，用于执行此类操作。您可以在此博文中查看它的屏幕截图。
Chrome 团队在 Chrome 30 中撤回了该功能，声明如下：
您可以尝试使用旧版本的 Chrome 来深入研究该问题，但我建议您查看 时间轴选项卡”将显示 Chrome 计算样式（选择器性能受到影响的地方）、布局和绘制页面所花费的时间。
The Chrome dev tools used to contain a CSS Selector Profiler for doing just this sort of thing. You can see screen shots of it in this blog post.
The Chrome team pulled the feature in Chrome 30 stating that:
You could try to use an old version of Chrome to dig into the issue, but I'd recommend taking a look at the Timeline tab of the current version of Chrome dev tools with will show you how long Chrome has taken to calculate styles (where selector performance is affected), layout and paint the page.
Opera 正在其分析器中试验 CSS 分析。
可以按照本页上的步骤启用它。
然后打开分析器，开始分析，并刷新您要分析的页面。
渲染完成后停止分析，然后将显示结果。
Opera is experimenting with css profiling in its profiler.
It can be enabled following the steps on this page.
Then open the profiler, start profiling, and refresh the page you wish to analyze.
Stop profiling after rendering finishes, then the results will be shown.