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

Question

我们的工作应用程序使用ExtJS(Sencha)框架进行UI.我对框架的问题是框架输出的HTML数量.

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

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

编辑:在谈到一位同事之后,他指出我在加载任何数据之前在网格上调用.suspendEvents()的方向以及之后的.resumeEvents(),这就节省了300ms的加载时间:O这减少了数量.getStyle Firebug检测到的呼叫.我还没有用Google SpeedTracer测试这种差异

Answer 1

如果不确切知道您的应用程序在做什么，则很难说出导致性能问题的原因。CSS 会产生一些影响，但影响不大，更可能的是应用程序中的某些 JavaScript 在页面渲染时导致过度回流。

Stubornella的文章摘要（第二个链接）

重排是根据样式规则对网页中的元素进行布局的过程。回流的计算成本很高，但通常可以在单次回流中绘制静态 HTML 页面，只要任何后续元素的呈现不会影响已绘制的元素。可能导致多次回流和一些解决方法的事情：

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