如何优化 Sencha Touch 性能

优化应用程序的启动时间：

•  使用sencha cmd 的build工具打包和压缩所有需要的js文件成一个单独的文件，如app-all.js
• 压缩你的JS和CSS文件。删除任何未使用的的JS函数或CSS mixin的（通过SASS/Compass 能很容易地检查）。有关详细信息，请仔细阅读http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch

• 动态加载外部JS文件，在这里已经有一个很好的话题：在Sencha Touch 2 里什么是正确加载外部JavaScript的方式

 优化应用程序的性能：

• 保持你的DOM结构尽可能小。不活动的view应当予以销毁（以后如果需要的话动态添加到容器中）。
• 避免使用CSS3属性，因为他们在Android设备上是很慢的。
• 对于任何scrollviews，l在Android上应禁用overscrol滚动效果。我已经在Android设备上测试过许多Sencha Touch2 应用，overscroll滚动效果因为延迟和滞后严重导致不愉快的经验。 （测试过Nexus S，Galaxy Tab的，和一些HTC手机）
• 压缩js和css，删除无用的js方法和css
• 启用硬件加速器

 

 

Sencha Touch 跟Ext js一个提供了丰富且高级的组件让我们能快速的开发出一个跨手机平台而且

很绚丽的产品,这听起来不错,但很快我们发现了一个严重的问题,手机上的效果根本没有在PC上用

chrome打开的效果一样让人有刷刷的快感，甚至让人痛苦. Sencha Touch和ext一样,组件是类式继

承的,大大降低了使用和学习的周期.但缺点也是很明显的,你每增加一个组件,内存消耗就增加很多,

可能你已经使用minify/JSBuilder/YUI compressor等工具压缩过你的代码了,如果性能还不佳,那么

可以看看以下是个人的一点建议

1.每个组件都应该考虑它的xtype,如果可以使用container就不要使用一个panel了

2.list一列的个数显示一屏就可以了,list有很多高级的功能,但性能非常的差,只能通过减少加载

项来解决

3.尽量不要使用tbar/bbar,Sencha Touch的提供的toolbar功能强大,按钮也很易用,但使用的DOM元

素也非常的多,自己写一个bar是非常必要的

4.把不在置顶的view中的DOM给删除,有时候,我们的项目中有好几个view,但我们一时间内是不可能

同时查看两个view的,应该把其他view的DOM元素给释放了

从上面看来,性能优化的关键是控制DOM元素的数量,但Sencha Touch还会对一些元素绑定事件,如何

开始就不显示这些元素,那么内存开销会更低

 

 Via ：http://blog.techferry.com/2012/11/16/sencha-touch-performance-improvement-tips/

A website designed for desktop browsers can take up to 40 seconds to load on mobile devices. Your Sencha Touch application if not built and deployed properly may take more than a minute to load – a far cry from an optimized mobile site. If your Sencha Touch mobile app is taking too long to load on a mobile device, here are a few things you can consider to improve the performance.

1. Use Sencha Build tool to package all required JS files (views, stores, models) and compress them in one app-all.js file.
2. Test your site with Firebug or Chrome Developer tool/Ripple to make sure that no more JS requests are going to server; if there are, consider using Ext.require() or adding these JS files in models, views, stores config parameters in your application/app.js and build again. This will ensure that loading and rendering is fast.

   Ext.require(['Ext.data.proxy.Rest',
                'Ext.dataview.NestedList',
                'Ext.TitleBar'
               ]);
   
   Ext.application({
         name: 'MyApp',
         views: ['View1', 'View2'],
         models: ['Model1','Model2'],
         stores:['Store1','Store2'],
         launch: function() {
            // Do your stuff here.
         }
   });

3. Look out for other CSS or JS files and make sure all of them are compressed. You can use YUI compressor.
4. Make sure you are using smaller sized images. You can also consider using an image cruncher to cut back on image size. For videos, consider embedding YouTube videos rather than streaming video yourself.
5. If your app is sending too many requests to server (using Store loads or via Ajax/REST), consider fetching the data in JSON format inside your JSP/PHP script response itself. You can then load the stores and display information from locally available data. Avoid sending too many AJAX/REST requests to server to get simple information like user/organization name, branding params etc.
6. Destroy components that are not visible on the screen anymore. Avoid too much nesting of panels. Try to keep your DOM size smaller.

 

Via ：http://thatdeveloper.blogspot.com/2012/07/sencha-touch-optimization.html

http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/ 
http://www.sencha.com/forum/showthread.php?184180-Optimize-DOM-size-using-TabPanel 
http://www.sencha.com/forum/showthread.php?101813-Great-article-for-tips-on-optimizing-performance-on-the-iPhone-and-iPad 
http://www.senchatouchbits.com/10/performance-optimization.html 

Some key things to watch out for:

1. Complex CSS. There are many features in CSS3 and webkit browsers that you can use that will really make your application look nice. One thing I wanted to use was a background gradient, however I read that this really hits performance hard, so I took it out and had a solid background colour. Still looks nice.
2. Unnecessary CSS. If you go to your project folder, then go to resources/themes/ and view your app.scss, many of the default includes may not be necessary, and you can just comment them out with a //, so if do need them, you can just uncomment the line and have it back. Try taking out a few and make sure your app still looks okay. You can tell by many of the names of the items what you can and cannot take out.
3. Memory usage. Some older phones do not have very much memory, and what you will want to watch out for is the size of the DOM. Making sure you destroy components when necessary will keep the size of the DOM to a minimum.

 

 There are a few things you can try:

• Turn on hardware acceleration by adding android:hardwareAccelerated="true" to the application or activity tag in the Android manifest file. More info here:http://developer.android.com/guide/topics/graphics/hardware-accel.html

• Modify the RenderPriority of the webview -http://developer.android.com/reference/android/webkit/WebSettings.RenderPriority.html

• Optimize your javaScript and CSS to minimize the number of reflows, memory used, and DOM size -http://www.html5rocks.com/en/mobile/mobifying.html#toc-optimizations

Personally, I found that keeping the DOM as small as possible, and enabling hardware acceleration made all of the difference between an unusable app, and a fairly smooth app.

 

Try the following for the best performance for android devices:

• Compress your JS & CSS files also remove any unused JS functions or CSS.
• Try to load external JS files dynamically , check thishttp://stackoverflow.com/questions/1...sencha-touch-2
• Avoid using CSS3 (Slow on Android)
• Keep DOM structure smallest as possible
• Do not use overscroll of any scrollviews in your application.(Should be disabled)

 

How are you preventing overscroll in your views? Can't see it in the docs!http://docs.sencha.com/touch/2-0/#!/...croll.Scroller

 setting the scroller to this sorts it:

 

Code:

scroller: {
      direction: 'vertical',
      directionLock: true,
      momentumEasing:  {
        momentum: {
          acceleration: 30,
          friction: 0.5
        },
        bounce: {
          acceleration: 0.0001,
          springTension: 0.9999
        },
        minVelocity: 5
      },
      outOfBoundRestrictFactor: 0
    }

技巧：

 避免使用CSS3 渐变等样式，用扁平样式代替

用低分辨率代替高分辨率图片

滚动List清单限制在30-40个以内

提升Panel面板的过度和响应能力：采用隐藏或显示组件，组装Form数据，动态组装数据到面板Panel

将js文件编译成一个单独的文件app-all.js

设计平衡，要专注交付一个快速响应的，而尽量避免CSS3效果，以简单开始，逐渐增加功能确认没有重大性能问题，在Chrome浏览器里开发，在模拟器或设备里进行测试