减少网页上CSS计算次数的方法

Question

我们的应用程序在工作中使用ExtJS（Sencha）框架。我对框架的问题是框架输出的HTML数量。

我注意到用户报告的系统区域有很多CSS计算调用。我在Google的Speedtracer中进行了测量，有些页面需要8秒才能加载。 80％的时间专门用于CSS计算。在尝试改变框架的工作方式之前，无论如何都要延迟页面的CSS计算，还是在渲染对象时完成这些计算？

我一直在寻找这样做的方法，也许我的“google-fu”很糟糕，但我还没有找到任何具体的方法来实现这样的目标。

编辑：在与一位同事交谈之后，他指出我在加载任何数据之前调用网格上的.suspendEvents（）和之后的.resumeEvents（），这仅仅节省了300ms的加载时间：O这就减少了Firebug检测到的.getStyle调用。我还没有用Google SpeedTracer测试这种差异

Answer 1

如果不确切知道您的应用正在做什么，很难说是什么导致了您的性能问题。 CSS会产生一些影响but not much，当页面呈现时，您的应用中的某些JavaScript更有可能是causing excessive reflows。

stubornella文章摘要（第二个链接）

回流是根据样式规则布置网页中元素的过程。回流在计算上很昂贵，但通常可以在单个回流中绘制静态HTML页面，只要任何后续元素的渲染不会影响已经绘制的元素。可能导致多次回流的事情和一些解决方法：

1. 动态地将CSS类添加到元素 - 尽可能将dom树中的类更改为限制影响
2. 添加多个DOM元素 - 创建一个不可见的结构，并将其添加到单个操作中
3. 向可见元素添加多个内联样式 - 更好地创建包含所有样式的类，然后应用类
4. 将动画应用于相对定位的元素 - 更好地为position: fixed或position: absolute元素制作动画，因为它们不会影响任何其他元素
5. 细粒度动画 - 一次移动一个元素3px可能比一次移动1px更光滑因为你避免了两次回流
6. 表是少数情况之一，稍后在DOM中呈现元素可以改变应该如何呈现早期元素 - 如果必须使用表，请使用table-layout: fixed

Answer 2

我们一直在努力应对使用extJS的开销 - 虽然框架非常全面，但性能上升（特别是IE6）已经成为一个很大的限制。以下是我们为优化框架而采取的一些步骤：

1. 简化库，仅包含您网站上使用的软件包。这意味着自定义jsb2文件并滚动自己的extJS部署。
2. 在我们的性能测试中，我们发现CSS是最大的罪犯。使用自定义构建的extJS的好处是减少未使用的 CSS选择器。为了进一步优化CSS，我们使用 Google的Page Speed来识别效率低下的CSS选择器来重构/删除它们。特别注意：
   • 伪：悬停选择器
   • 带有后代选择器的通用*键

产生的ext“lite”应该会产生显着的性能提升，特别是在IE6中。尽管Secha团队在每次发布时都在不断改进性能，但加载整个框架的开销太昂贵了，无法忽略。

希望这会有所帮助......

Answer 3

Smartoptimizer非常棒，您尝试过这些类型的gzip代码压缩类型工具吗？

https://github.com/farhadi/SmartOptimizer