CSS性能分析器？ [英] CSS Performance Profiler?

问题描述

我目前正在一个网站上，在我的大量的样式表中的某个地方，一些是杀了性能的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仓库： https://github.com/andyedinborough/stress-css

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性能分析器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！