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

•  使用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:

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浏览器里开发，在模拟器或设备里进行测试

发表评论

IT瘾于2012年9月21日 下午12时38分13秒发布 #

text/html

下面是创建新的text/html文档时如何选择doctype的简单指南：

标准模式，最前沿的验证

<!DOCTYPE html>

如果想验证 诸如<video>、<canvas>和ARIA这样的新特性，那么这样做是对的。注意，HTML5的有效定义依旧在变化中，请确保在Firefox、Safari、Chrome、Opera9或Opera10中测试图像对齐。在Internet Explorer中测试图像对齐是不足够的，无论如何请确保在IE8中也进行了测试。

标准模式，更稳定的验证目标

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

这个doctype也会触发标准模式，且10岁大的HTML4.01有效定义是稳定的。请确保在Firefox、Safari、Chrome、 Opera9或Opera10中测试图像对齐。在Internet Explorer中测试图像对齐是不足够的，无论如何请确保在IE8中也进行了测试。

要使用标准模式，但仍要验证不推荐标记或在表格布局中使用切片图像且不想去修复它们。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

它会触发准标准模式（和老掉牙的Mozilla中的完全标准模式full Standards mode）。请注意，如果以后移植到HTML5上，基于利用表格实现的切片图像的布局可能会被破坏 （且完整标准模式也如此）。

故意要使用怪癖模式

没有doctype。

请别这样做。故意为怪癖模式所做的设计将会困扰你，在将来你的同事或继任者甚至没有人关心Windows IE6（Netscape4.x和IE5已经没有人关心了）。为怪癖模式设计是个坏主意。相信我。

如果你想依旧支持Windows IE6，对它做一个特别的hack使用条件注释 比使其他浏览器退步到怪癖模式好。

我不推荐任何的XHTML doctype，因为XHTML被用作text/html被认为是有害的 。无论如何，如果你选择使用XHTML doctype，请注意XML声明会使IE6（但不是IE7！）触发怪癖模式。

application/xhtml+xml

对application/xhtml+xml的简单指南是绝不使用doctype。该方式下的网页不是“严格一致”的XHMTL1.0，但这并不重要。（请看后面的附录）

来自：这里

发表评论

IT瘾于2012年9月13日 上午11时33分29秒发布 #