使用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不使用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並將其刪除。 它還提供了有關如何改進代碼的更多建議。

幾點建議： 參考

1. 使用遠期緩存過期標頭。 這將阻止瀏覽器發送條件GET請求。
2. 如果您希望將HTML頁面緩存，請嘗試將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）在導航面板中使用build（push，pop方法）

4）如果您的應用中有大列表：

• 顯示其中3-5個，其他autodestroy，使用延遲加載
• 或使用列表分頁插件
• 閱讀無限列表

5）永遠銷毀不使用的面板！

對於構建我使用cordova和CLI：

~/ sencha cordova init
~/ sencha app build native

沒有cordova應用程序大小〜5-6mb。 使用cordova構建~1-1.2mb。 科爾多瓦也有很好的原生功能橋梁。

閱讀 sencha架構師3中的主題。

---

索里因為我的英語不好。