使用 Sencha Architect 提高 ST2.3 应用程序的性能

Posted 2023-02-25

【中文标题】使用 Sencha Architect 提高 ST2.3 应用程序的性能

【英文标题】：Improve performance ST2.3 app with Sencha Architect

【发布时间】：2014-02-17 10:24:35

【问题描述】：

我正在尝试提高我的 Sencha Touch 2.3 应用程序的性能。我确实使用 Sencha Architect 3 构建了应用程序。现在，我阅读了一些关于通过不包括所有默认 sencha css 类来提高应用程序性能的帖子（请参阅https://www.sencha.com/blog/4-tricks-for-smaller-css-in-touch-22/）。我也想将此方法应用于我的应用程序（其他建议也会被考虑在内）。但是，使用 Sencha Architect 编译/构建我的应用程序时，由于 Sencha Architect 中的主题选项，不使用 app.scss 文件（请参阅Sencha Architect 3 does not use app.css）。是否有另一种方法可以不包含所有默认 css 文件？

使用：

煎茶架构师版本：3.0.2.1375 Sencha cmd：4.0.2.67 框架： 煎茶触控 2.3.x

亲切的问候

【参考方案1】：

我没有使用 Sencha Architect，但使用了早期版本的 Sencha 作为 phonegap 应用程序，可能有一些相同的考虑因素。

您可以使用 Chrome 审核选项卡来查找未使用的 css 并将其删除。它还提供了更多关于如何改进代码的建议。

更多建议：ref

使用远期缓存过期标头。这将阻止浏览器发送有条件的 GET 请求。 如果您希望缓存 html 页面，请尝试将其限制为 25.6KB 或更小，因为之前的测试表明，该限制（由 ios 3.2 在 iPad 上施加）是测试设备的最低 HTML 资源限制。 将 CSS 和 JS 组件保持在 1MB 以下。当然，1MB 是巨大的，你的组件应该比这小得多，但不要为了缓存性而将组件分成单独的请求，除非它的大小接近 1MB。 如果您的组件在缓存中保留很长时间或跨电源循环很重要，请考虑使用 HTML5 应用程序缓存。

也不要忘记基本的东西，例如将图像转换为内联 svg 以减少发出的请求并将 javascript 包含移动到页面底部。

如果您正在制作动画，请使用 css 3d 变换。这利用了 GPU 而不是 2d 变换。例如：translate3d()

希望这有帮助，祝你好运！

【参考方案2】：

我的应用程序也使用架构师 3，首先它的性能非常糟糕。不过现在基本正常了。一些建议：

1) 不要使用 css 阴影

2) 不要放大 DOM 结构

3) 使用内置导航面板（推送、弹出方法）

4) 如果您的应用中有大量列表：

显示 3-5 个，其他自动销毁，为它们使用延迟加载 或使用列表分页插件 read about infinite lists

5) 永远销毁未使用的面板！

对于构建我使用cordova和CLI：

~/ sencha cordova init
~/ sencha app build native

没有 cordova 应用程序大小 ~5-6mb。 使用cordova构建〜1-1.2mb。 科尔多瓦也有很好的原生功能桥。

Read 关于煎茶建筑师 3 的主题化。

---

对不起，我的英语不好。

【讨论】：

附加信息： sencha 在 android 上的最大问题 - 它使用 webview 作为容器。但这个问题主要在 android 4.4 KitKat 中解决，因为它使用 chrome 作为 webview。它提高了 sencha 和其他 html5 应用程序的性能。 overviev