extjs中的代码优化技术？

Posted 2023-02-26

【中文标题】extjs中的代码优化技术？

【英文标题】：Code optimization techniques in extjs?

【发布时间】：2012-07-13 13:52:14

【问题描述】：

我正在页面中动态创建一些控件。当我们有大约 50 个控件时，它会变慢。

extjs 中使用了哪些代码优化技术/指南？ 是否有任何特定方法会减慢整个加载速度？

【问题讨论】：

Sencha 刚刚发表了一篇关于性能技术的文章 (sencha.com/blog/ext-js-4-1-performance)。这可能与您的情况没有直接关系，但仍然值得考虑。

【参考方案1】：

Sencha 有很棒的帖子：

Ext JS 4.1 Performance关于：

网络延迟会严重影响初始启动时间，还会影响数据存储加载时间。 CSS 处理。 javascript 执行。 DOM 操作。

Optimizing Ext JS 4.1-based Applications关于优化技巧和页面分析器工具。

【参考方案2】：

我的建议是

使用 Ext.container.Container 而不是 Ext.panel.Panel。 不添加 ext 组件，而是使用带有数据视图的 XTemplate 来加载类似的控件。 如果您使用许多图像，则使用图像精灵 - 图像精灵是放入单个图像的图像集合。包含许多图像的网页可能需要很长时间才能加载并生成多个服务器请求。 使用图像精灵将减少服务器请求的数量并节省带宽。 http://css-tricks.com/css-sprites/