问题描述
我目前正在一个网站上,在我的大量的样式表中的某个地方,一些是杀了性能的IE。有什么好的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.
在您提出问题之前,我已禁用JavaScript,不透明度和box-shadow / text-shadow规则。页面仍然跳跃。 :/如果我禁用所有的CSS,它运行伟大。
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.
我需要一个工具,可以对页面和报告CSS瓶颈的位置进行配置。
I need a tool that can profile the page and report where the CSS bottlenecks are.
推荐答案
所以,我终于开始编写一个JavaScript函数,索引我的所有CSS类在页面上,然后单独切换它们,同时滚动页面。这立刻指出错误的类,从那里,我能够确定错误的属性。事实证明,在包含许多子元素的元素(例如body级别 div
)上执行 border-radius
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-radius
on an element that contains many children (e.g. a body level div
) performs incredibly poorly on IE9.
我为CSS压力测试启动了一个github仓库:
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.
这篇关于CSS性能分析器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!