本文介绍了CSS性能分析器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在一个网站上,在我的大量的样式表中的某个地方,一些是杀了性能的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性能分析器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 01:21