WebApp框架性能对比：jQuery Mobile/Zepto/xui/Sencha Touch/App Framework
据艾媒咨询《2013年中国移动互联网发展报告》显示，2013年上半年中国手机网民规模已经突破5亿大关，2013年年底这一数据将达到5.7亿，预计2014年第一季度，中国手机网民规模将超过整体PC网民规模。2013Q3中国智能手机市场销量达到8217万部，同比增长64.0%，环比增长11.0%。
2013年中国智能手机市场销量状况
伴随着移动互联网的发展以及手机系统的多样性，平台的分化在移动端比PC端更厉害。iOS与Android占据了主流，但有着强大后盾的WP系统也不可小视（虽然我不怎么看好）；还有老牌的Blackberry，以及新晋的Ubuntu、Firefox
os、Tizen等等。不同于iOS的“标准化”，Android的开源带来了严重的碎片化；虽说丰富了市场，但是各种价位的机器硬件配置以及各种美化的ROM等等也给Web开发带来了很大的挑战。开发者需要考虑不同用户层面的机器性能，尤其是低端机器的性能。
平台的分化对于需要快速迭代的产品来说，Web App或者Hybrid App（下面统称Web
App）无疑是一个很好的权衡。加上微信的发展，各种公众号的出现，Web
App的需求日益增加。而且随着类Phonegap的框架出现，Nodejs的发展，JS前景真的一片光明啊。
回归正题，笔者最近跟一朋友聊天，问到我们这边移动端用的啥框架，我说我们用的Zepto，框架小，类jQuery，没有多余的其他模块，适合我们团队自己扩展，他就推荐了App
Framework给我，性能比Zepto好很多，有UI框架等。当时这货我真没听过，了解了下发现前身是jqMobi。报着谨慎好学的态度，对目前几个较流行的框架做了个DOM性能测试，好看看到底谁的性能比较好。这里只是希望抛砖引玉，希望让大家对目前的框架有个大概的了解，欢迎扔砖交流。
jQuery MobileZeptoxuiSencha TouchApp
Framework版本1.4.11.1.32.3.22.3.12.1压缩后大小（KB，未gzip）191251112928支持平台（请以官网为准）基本是All(http://jquerymobile.com/gbs/1.4/)
Safari 6+
Chrome 30+
Firefox 24+
iOS 5+ Safari
Android 2.3+ Browser
Internet Explorer 10+ (Windows, Windows Phone)
webkit, ie mobile, and blackberryiOS4+
BB OS 10
BB Table OS 1
WP8
Android 2.3+
Android*, Apple iOS*, Microsoft Windows* 8, and new RIM Blackberry*
devices备注ExtJS+jqTouch+Raphaël整合而来前身是jqMobi，被Intel收归名下
可以看到像Zepto、xui以及App
Framework的文件大小是比较小的，因为他们的核心主要是DOM、Event以及Ajax等，而jQuery Mobile以及Sencha
Touch框架文件大小是比较大的，是因为它们里面整合了很多其他模块。而且很蛋疼的是jQuery
Mobile还要引入jQuery的库文件，那是有多大啊。因此使用这些大集合的框架时需要开发人员权衡所需。
对于平台的支持，不同于PC端，移动端的换代是更快的，所以一般你的应用考虑支持iOS5+、Android2.3+以及WP8+等就差不多了，上面这些框架都是支持的。而且尽可能少的向下兼容也可以让框架代码更简洁。
（Ops/sec）12345AVGjQuery Mobile1,039,806
±3.37%
12% slower
1,041,818
±2.56%
6% slower
1,017,943
±3.11%
10% slower
1,020,511
±3.28%
9% slower
953,967
±2.62%
17% slower
1,014,809Zepto1,156,100
±1.43%
fastest
1,102,945
±1.78%
fastest
1,117,474
±1.46%
fastest
1,101,460
±1.50%
fastest
1,132,646
±1.48%
fastest
1,122,127xui366,338
±2.16%
69% slower
396,797
±2.00%
64% slower
345,068
±1.78%
69% slower
363,655
±2.49%
67% slower
345,288
±1.98%
70% slower
343,429Sencha Touch410,570
±14.73%
69% slower
416,537
±14.23%
66% slower
393,405
±14.34%
69% slower
415,602
±13.01%
66% slower
388,326
±14.72%
70% slower
404,888App Framework719,540
±4.97%
40% slower
755,410
±2.68%
32% slower
742,786
±4.22%
35% slower
735,735
±5.74%
36% slower
752,921
±4.05%
35% slower
741,278（Ops/sec）12345AVGjQuery Mobile
69,822
±1.12%
4% slower
70,274
±1.11%
5% slower
69,603
±1.19%
5% slower
71,051
±1.06%
1% slower
70,072
±1.07%
4% slower
70,164Zepto
72,667
±0.83%
fastest
73,776
±0.92%
fastest
73,411
±0.92%
fastest
72,281
±1.28%
fastest
72,999
±1.24%
fastest
73,026xui
45,657
±3.10%
39% slower
46,223
±3.50%
39% slower
44,825
±3.96%
41% slower
44,570
±3.68%
40% slower
44,302
±2.49%
40% slower
45,115Sencha Touch
57,958
±4.53%
23% slower
57,652
±4.57%
25% slower
57,551
±4.38%
24% slower
55,720
±6.69%
27% slower
56,145
±5.36%
26% slower
57,005App Framework
54,294
±5.38%
29% slower
54,167
±5.18%
30% slower
54,635
±4.85%
28% slower
55,539
±1.03%
23% slower
54,947
±1.12%
25% slower
54,716（Ops/sec）12345AVGjQuery Mobile
31,487
±1.53%
2% slower
31,206
±1.77%
7% slower
29,559
±3.29%
11% slower
31,457
±0.78%
3% slower
30,999
±2.89%
5% slower
30,941Zepto
31,311
±3.45%
5% slower
32,364
±3.35%
5% slower
28,986
±5.77%
fastest
31,661
±3.52%
fastest
32,093
±0.96%
fastest
31,283xui
28,015
±3.26%
15% slower
28,139
±3.19%
17% slower
27,952
±3.30%
16% slower
28,273
±3.25%
15% slower
27,996
±4.23%
16% slower
28,075Sencha Touch
32,940
±3.66%
fastest
33,285
±0.82%
fastest
32,374
±3.37%
2% slower
32,354
±3.76%
3% slower
32,396
±4.41%
2% slower
32,669App Framework
31,687
±4.15%
4% slower
31,900
±0.93%
4% slower
32,341
±0.78%
fastest
32,444
±0.81%
fastest
31,635
±4.33%
5% slower
32,001（Ops/sec）12345AVGjQuery Mobile
57,902
±0.47%
7% slower
60,689
±1.11%
9% slower
59,093
±1.32%
10% slower
60,173
±1.35%
13% slower
60,724
±1.34%
11% slower
59,716Zepto
62,747
±1.52%
fastest
66,762
±1.10%
fastest
65,816
±1.14%
fastest
68,612
±0.81%
fastest
67,948
±1.11%
fastest
66,377xui
51,308
±1.80%
18% slower
54,685
±1.51%
18% slower
53,568
±1.39%
19% slower
55,378
±1.38%
20% slower
56,751
±1.28%
17% slower
54,338Sencha Touch
49,215
±1.15%
21% slower
49,705
±2.82%
27% slower
49,650
±2.60%
26% slower
46,775
±2.86%
33% slower
50,790
±2.92%
27% slower
49,227App Framework
43,402
±8.78%
35% slower
44,561
±4.62%
35% slower
44,170
±5.90%
36% slower
44,463
±5.88%
38% slower
44,527
±4.89%
37% slower
44,224
从上面对ID、样式名、name以及标签的获取性能来看，各有千秋。可以看到Zepto在各项的测试中性能都比较突出，xui性能综合起来最差，Sencha
Touch也很一般。还有朋友介绍的App Framework性能似乎也不是很理想，难道是我的测试方式有问题？
话说回来，在任何一个项目中，技术选型是一个很重要的问题，它影响到后面整个架构的设计以及扩展。而选型的其中一条原则就是性能的测试，不是说要选DOM性能最好的，DOM性能只是整个Web开发中的一环，框架的整体架构设计、性能、扩展性等等的权衡才是最重要的。选型就像用人，不选最好的，直选最合适的。
原文链接：http://www.zawaliang.com/2014/03/529.html
2013年中国智能手机市场销量状况
伴随着移动互联网的发展以及手机系统的多样性，平台的分化在移动端比PC端更厉害。iOS与Android占据了主流，但有着强大后盾的WP系统也不可小视（虽然我不怎么看好）；还有老牌的Blackberry，以及新晋的Ubuntu、Firefox
os、Tizen等等。不同于iOS的“标准化”，Android的开源带来了严重的碎片化；虽说丰富了市场，但是各种价位的机器硬件配置以及各种美化的ROM等等也给Web开发带来了很大的挑战。开发者需要考虑不同用户层面的机器性能，尤其是低端机器的性能。
平台的分化对于需要快速迭代的产品来说，Web App或者Hybrid App（下面统称Web
App）无疑是一个很好的权衡。加上微信的发展，各种公众号的出现，Web
App的需求日益增加。而且随着类Phonegap的框架出现，Nodejs的发展，JS前景真的一片光明啊。
回归正题，笔者最近跟一朋友聊天，问到我们这边移动端用的啥框架，我说我们用的Zepto，框架小，类jQuery，没有多余的其他模块，适合我们团队自己扩展，他就推荐了App
Framework给我，性能比Zepto好很多，有UI框架等。当时这货我真没听过，了解了下发现前身是jqMobi。报着谨慎好学的态度，对目前几个较流行的框架做了个DOM性能测试，好看看到底谁的性能比较好。这里只是希望抛砖引玉，希望让大家对目前的框架有个大概的了解，欢迎扔砖交流。
jQuery MobileZeptoxuiSencha TouchApp
Framework版本1.4.11.1.32.3.22.3.12.1压缩后大小（KB，未gzip）191251112928支持平台（请以官网为准）基本是All(http://jquerymobile.com/gbs/1.4/)
Safari 6+
Chrome 30+
Firefox 24+
iOS 5+ Safari
Android 2.3+ Browser
Internet Explorer 10+ (Windows, Windows Phone)
webkit, ie mobile, and blackberryiOS4+
BB OS 10
BB Table OS 1
WP8
Android 2.3+
Android*, Apple iOS*, Microsoft Windows* 8, and new RIM Blackberry*
devices备注ExtJS+jqTouch+Raphaël整合而来前身是jqMobi，被Intel收归名下
可以看到像Zepto、xui以及App
Framework的文件大小是比较小的，因为他们的核心主要是DOM、Event以及Ajax等，而jQuery Mobile以及Sencha
Touch框架文件大小是比较大的，是因为它们里面整合了很多其他模块。而且很蛋疼的是jQuery
Mobile还要引入jQuery的库文件，那是有多大啊。因此使用这些大集合的框架时需要开发人员权衡所需。
对于平台的支持，不同于PC端，移动端的换代是更快的，所以一般你的应用考虑支持iOS5+、Android2.3+以及WP8+等就差不多了，上面这些框架都是支持的。而且尽可能少的向下兼容也可以让框架代码更简洁。
（Ops/sec）12345AVGjQuery Mobile1,039,806
±3.37%
12% slower
1,041,818
±2.56%
6% slower
1,017,943
±3.11%
10% slower
1,020,511
±3.28%
9% slower
953,967
±2.62%
17% slower
1,014,809Zepto1,156,100
±1.43%
fastest
1,102,945
±1.78%
fastest
1,117,474
±1.46%
fastest
1,101,460
±1.50%
fastest
1,132,646
±1.48%
fastest
1,122,127xui366,338
±2.16%
69% slower
396,797
±2.00%
64% slower
345,068
±1.78%
69% slower
363,655
±2.49%
67% slower
345,288
±1.98%
70% slower
343,429Sencha Touch410,570
±14.73%
69% slower
416,537
±14.23%
66% slower
393,405
±14.34%
69% slower
415,602
±13.01%
66% slower
388,326
±14.72%
70% slower
404,888App Framework719,540
±4.97%
40% slower
755,410
±2.68%
32% slower
742,786
±4.22%
35% slower
735,735
±5.74%
36% slower
752,921
±4.05%
35% slower
741,278（Ops/sec）12345AVGjQuery Mobile
69,822
±1.12%
4% slower
70,274
±1.11%
5% slower
69,603
±1.19%
5% slower
71,051
±1.06%
1% slower
70,072
±1.07%
4% slower
70,164Zepto
72,667
±0.83%
fastest
73,776
±0.92%
fastest
73,411
±0.92%
fastest
72,281
±1.28%
fastest
72,999
±1.24%
fastest
73,026xui
45,657
±3.10%
39% slower
46,223
±3.50%
39% slower
44,825
±3.96%
41% slower
44,570
±3.68%
40% slower
44,302
±2.49%
40% slower
45,115Sencha Touch
57,958
±4.53%
23% slower
57,652
±4.57%
25% slower
57,551
±4.38%
24% slower
55,720
±6.69%
27% slower
56,145
±5.36%
26% slower
57,005App Framework
54,294
±5.38%
29% slower
54,167
±5.18%
30% slower
54,635
±4.85%
28% slower
55,539
±1.03%
23% slower
54,947
±1.12%
25% slower
54,716（Ops/sec）12345AVGjQuery Mobile
31,487
±1.53%
2% slower
31,206
±1.77%
7% slower
29,559
±3.29%
11% slower
31,457
±0.78%
3% slower
30,999
±2.89%
5% slower
30,941Zepto
31,311
±3.45%
5% slower
32,364
±3.35%
5% slower
28,986
±5.77%
fastest
31,661
±3.52%
fastest
32,093
±0.96%
fastest
31,283xui
28,015
±3.26%
15% slower
28,139
±3.19%
17% slower
27,952
±3.30%
16% slower
28,273
±3.25%
15% slower
27,996
±4.23%
16% slower
28,075Sencha Touch
32,940
±3.66%
fastest
33,285
±0.82%
fastest
32,374
±3.37%
2% slower
32,354
±3.76%
3% slower
32,396
±4.41%
2% slower
32,669App Framework
31,687
±4.15%
4% slower
31,900
±0.93%
4% slower
32,341
±0.78%
fastest
32,444
±0.81%
fastest
31,635
±4.33%
5% slower
32,001（Ops/sec）12345AVGjQuery Mobile
57,902
±0.47%
7% slower
60,689
±1.11%
9% slower
59,093
±1.32%
10% slower
60,173
±1.35%
13% slower
60,724
±1.34%
11% slower
59,716Zepto
62,747
±1.52%
fastest
66,762
±1.10%
fastest
65,816
±1.14%
fastest
68,612
±0.81%
fastest
67,948
±1.11%
fastest
66,377xui
51,308
±1.80%
18% slower
54,685
±1.51%
18% slower
53,568
±1.39%
19% slower
55,378
±1.38%
20% slower
56,751
±1.28%
17% slower
54,338Sencha Touch
49,215
±1.15%
21% slower
49,705
±2.82%
27% slower
49,650
±2.60%
26% slower
46,775
±2.86%
33% slower
50,790
±2.92%
27% slower
49,227App Framework
43,402
±8.78%
35% slower
44,561
±4.62%
35% slower
44,170
±5.90%
36% slower
44,463
±5.88%
38% slower
44,527
±4.89%
37% slower
44,224
从上面对ID、样式名、name以及标签的获取性能来看，各有千秋。可以看到Zepto在各项的测试中性能都比较突出，xui性能综合起来最差，Sencha
Touch也很一般。还有朋友介绍的App Framework性能似乎也不是很理想，难道是我的测试方式有问题？
话说回来，在任何一个项目中，技术选型是一个很重要的问题，它影响到后面整个架构的设计以及扩展。而选型的其中一条原则就是性能的测试，不是说要选DOM性能最好的，DOM性能只是整个Web开发中的一环，框架的整体架构设计、性能、扩展性等等的权衡才是最重要的。选型就像用人，不选最好的，直选最合适的。
原文链接：http://www.zawaliang.com/2014/03/529.html
还没人转发这篇日记
