css – 使用Sencha Architect改进性能ST2.3应用程序

我正在努力提高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中的主题选项(见 Sencha Architect 3 does not use app.css),因此未使用app.scss文件.有没有其他方法包括所有认的CSS文件

使用:

> Sencha Architect版本:3.0.2.1375
> Sencha cmd:4.0.2.67框架:
> Sencha Touch 2.3.x

亲切的问候

解决方法

我没有使用过Sencha Architect,但是使用早期版本的Sencha作为一个手机应用程序,也许有一些相同的考虑因素适用.

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

更多建议:ref

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

另外,不要忘记基本的东西,例如将图像转换为内联svg以减少所要求的请求.将Javascript包含移动到页面底部.

如果您正在制作动画,请使用css 3d变换.这使用GPU而不是2D变换.例如:translate3d()

希望这有帮助,祝你好运!

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效