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

Question

我正在尝试提高我的 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

亲切的问候

Answer 1

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

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

更多建议：ref

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

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

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

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

Answer 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 的主题化。

---

对不起，我的英语不好。