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

Question

我们工作中使用的应用程序采用了ExtJS (Sencha)框架用于UI。我对这个框架有问题的是框架输出的HTML太多。

我注意到用户报告的系统缓慢区域有很多CSS计算调用。我在Google的Speedtracer中测量过，一些页面需要8秒才能加载。80%的时间纯粹用于CSS计算。在尝试改变框架工作方式之前，是否有任何方法可以延迟页面的CSS计算，或者这些计算是在对象渲染时进行的？

我一直在寻找方法来解决这个问题，也许我的“google-fu”很糟糕，但我没有找到任何关于如何实现这样的事情的具体信息。

编辑：和同事交谈后，他指引我在加载数据之前在网格上调用.suspendEvents()，然后在加载完成后调用.resumeEvents()，这单独节省了300毫秒的加载时间:O 这减少了Firebug检测到的.getStyle调用的数量。我还没有用Google SpeedTracer测试这种差异。

- StevenMcD

---

不确定我是否理解你的问题。但通常情况下，CSS不会影响页面渲染。你提到的问题是ExtJS输出HTML和计算CSS的数量。我猜测问题仍然是由JS渲染引起的。也许你可以尝试使用Firebug或Fiddler来跟踪请求，找到瓶颈。 - tshao

同意。除非它在 Telex 上运行，否则世界上没有任何数量的 CSS 需要 8 秒钟来计算。我很想知道你是如何测试这个的。 - Brian Moeskau

如果我能上传SpeedTracer的结果，我会这样做，也许我必须尝试截屏。 SpeedTracer与Firebug不同之处在于它实际上显示了UI何时可用以及何时不可用。 Firebug和Fiddler显示从服务器下载响应所需的时间。 - StevenMcD

我上次查看ExtJS渲染时发现它使用了很多绝对定位。可能autoHeight或不同的布局可以帮助解决这个问题，但我还没有找到一个好的答案。 - wombleton

有哪些CSS计算方式？我从未听说过这个术语。你是指Js计算吗？在操作DOM时，您可以进行许多优化，例如作用域等方面。 - Tom Gullen

@Tom：CSS计算是浏览器决定应该应用哪些样式到DOM对象的时间度量。在ExtJs框架中，它输出了很多表格并且遗憾地使用表格进行布局。正如RobertC在下面的回答中指出的那样，这可能与过多的重排有关（http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/）。 - StevenMcD

Answer 1

不了解您的应用程序实际操作，很难确定性能问题的原因。CSS会有一些影响，但不大，更可能的是在页面呈现时，应用程序中的一些JavaScript导致过多的回流。

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

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

1. 动态添加CSS类到元素 - 尽可能在DOM树中低层级更改类以限制影响
2. 添加多个DOM元素 - 创建一个不可见的结构，然后一次性添加它，而不是逐个添加
3. 向可见元素添加多个内联样式 - 最好创建一个包含所有样式的类，然后应用该类
4. 将动画应用于相对定位的元素 - 最好将动画应用于position: fixed或position: absolute元素，因为它们不会影响其他任何东西
5. 细粒度动画 - 每次将元素移动3像素可能比每次移动1像素更平滑，因为您避免了两次回流
6. 表格是少数几种情况之一，其中DOM中稍后渲染的元素可以更改先前元素的呈现方式 - 如果必须使用表格，请使用table-layout: fixed

- robertc

---

现在正在阅读关于回流的文章，看起来很有前途，谢谢。编辑：我非常确定这正是正在发生的事情。我在文章中看到的最好的建议是避免使用表格进行布局，可惜正在使用的Javascript框架正是如此。 - StevenMcD

罗伯特：你能否编辑你的答案，详细解释一下回流（reflow）的内容，这样用户就不需要打开链接了。我会接受它作为答案。谢谢，伙计。 - StevenMcD

Answer 2

我们一直在努力应对使用extJS所带来的开销 - 尽管该框架非常全面，但性能问题（尤其是在IE6中）一直是一个很大的限制。以下是我们为优化框架所采取的一些步骤：

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

结果得到的ext "lite"应该会在IE6中产生显著的性能提升。尽管Secha团队在每个版本中都在不断地进行性能改进，但加载整个框架的开销太大，不能忽视。

希望这可以帮到您...

- HOCA

Answer 3

Smartoptimizer真的很棒，你试过那些gzip代码压缩工具吗？

https://github.com/farhadi/SmartOptimizer

- Maurice

---

这与大小无关，而与DOM对象数量和CSS规则数量有关。压缩通常会导致处理速度变慢。 - Alex

正如亚历山大所说，在这种情况下它已经被压缩了，问题在于DOM对象的数量以及浏览器计算分配给每个DOM对象的规则并呈现它所需的时间。 - StevenMcD