使用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架构师编译/构建我的应用程序时，由于Sencha Architect中的主题选项，因此未使用app.scss文件（请参阅Sencha Architect 3 does not use app.css）。还有另一种不包含所有默认css文件的方法吗？

使用：

• Sencha Architect版本：3.0.2.1375
• Sencha cmd：4.0.2.67框架：
• Sencha Touch 2.3.x

亲切的问候

Answer 1

我没有使用Sencha Architect，但是使用早期版本的Sencha作为手机应用程序，可能需要考虑一些相同的注意事项。

您可以使用Chrome审核标签查找未使用的CSS并将其删除。它还提供了有关如何改进代码的更多建议。

更多建议：ref

1. 使用远期缓存过期标头。这将阻止浏览器发送条件GET请求。
2. 如果您希望将HTML页面缓存，请尝试将HTML页面限制为25.6KB或更低，因为之前的测试显示iOS 3.2对iPad施加的限制是所测试设备的最低HTML资源限制。 / LI>
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个，其他autodestroy，使用延迟加载
• 或使用list paging plugin
• read about infinite lists

5）永远销毁不使用的面板！

对于构建我使用cordova和CLI：

~/ sencha cordova init
~/ sencha app build native

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

Read关于在sencha架构师3中的主题。

---

Sory因为我的英语不好。