论文部分内容阅读
[摘 要]新一代的Web框架是为了解决Web应用在移动设备上的跨平台问题、增加对HTML5特性的支持而开发，本文旨在通过测试的方法研究jQuery Mobile，Dojo Mobile和Sencha Touch三个Web框架的性能差异和优劣。
本文利用WebPageTest和Mobitest工具对移动Web开发框架进行测试并横向的比较分析。分析得出jQuery Mobile性能与Dojo Mobile性能相近，但jQuery Mobile略胜一筹。Sencha Touch在测试中总体表现出了比较差的性能，但随着测试平台性能的提高，Sencha Touch与jQuery Mobile的载入性能差距越来越小。
[关键词]Web框架 HTML5 性能
中图分类号：O631.1+1 文献标识码：O 文章编号：1009―914X（2013）34―0263―03
一、研究背景及现状
Web框架最初是用于支持基于B/S架构的动态网页、网络应用及服务的开发框架。它用于开发在客户端（浏览器）上运行的JavaScript代码程序，主要处理界面展示、Ajax等功能。常见的Web框架有ExtJs、jQuery、Dojo、YUI等。
不同的框架的特性和性能有所差异，因此开发Web应用时，各个框架的特点及优缺点的比较就显得相对重要。
在对Web开发框架进行比较分析时，框架的载入速度和性能是比较分析的重要参考依据。而现有情况下，关于载入速度和性能的结论多是用户主观感受的体现，另外对框架载入速度和网站性能优化测试大多是针对某一个网站或页面进行的自身的纵向测试，没有针对不同框架创造出相同的情景再进行横向比较。这使得现有的Web框架在性能比较上并不够全面。
本文旨在尽力提供这种测试情景，对移动Web开发框架进行横向的比较分析，从而为移动Web开发框架的整体比较提供载入速度和性能方面的参考依据。
二、测试方案
本次测试主要针对jQuery Mobile，Dojo Mobile和Sencha Touch三个Web框架。影响Web页面性能的指标有服务器性能、网络性能和前端性能（主要由浏览器JavaScript解析执行、CSS解析和解压缩数据等方面的性能组成）。其中前端性能是影响用户体验的主要部分，因此本次主要对前端性能进行测试。
本测试中选用了几个典型的最常用的使用组件，即列表，首部导航栏、表单元素和布局作为对比，通过测试工具获得的性能数据做分析和对比。
测试选取了具有Webkit内核的Chrome浏览器，另外综合考虑各种因素后选择具有C/S架构、功能强大、易于扩展的WebPageTest测试工具选为主要测试工具，并搭建了装有Chrome浏览器的专用的桌面测试客户端，移动端则使用Mobitest工具。
（1）WebPageTest：
一个开源的对网页各方面性能指标进行测试的工具，可直接使用其在线版对网页进行性能测试，也可以自己搭建WebPageTest私有服务器进行内网性能测试。
桌面浏览器测试选用Chrome浏览器进行，分别在无cache情况下（即First View，cache和cookie都为空时，用户第一次登陆）和有cache情况下（即Repeat View，在第一次访问完之后，关闭浏览器，再访问一次，这时候的性能）进行测试。
（2）Mobitest：
是专门用来测试iOS和android页面性能的在線服务，可以在线免费使用，但由于移动设备的局限性，能监测到的信息要比桌面上的少很多。
移动端测试时选用三个终端平台，即Android手机终端、iOS平板终端和iOS手机终端，使用移动端的默认浏览器。由于在移动终端上的测试没有桌面测试工具强大、测试指标丰富，因而测试得到的数据与桌面测试并不相同。除此之外，网络性能对在移动端的测试有较大影响，为了消除这种影响，在测评时选择高速稳定的LAN或WiFi而不是慢速GPRS或3G连接。
每次测试对上文提到的测试用例做三组测试，获得如图2的瀑布图，并得到平均页面载入时间、平均页面大小以及视觉载入时间。
从测试结果来看，jQuery Mobile和Dojo Mobile各方面指标差距比较小，但jQuery Mobile的各种类库要比Dojo Mobile小10%，所以jQuery Mobile的各项载入时间在没有cache的情况下比Dojo Mobile快10%左右，但在有Cache的情况，结果相差不大，类库已被缓存，所以差距主要由html文件的大小决定。
和jQuery Mobile相比，Sencha Touch类库明显增大，经查看请求文件可知，主要由JavaScript类库引起，即sencha-touch-all.js（568KB）。Sencha Touch也在努力保持轻量，但瘦身的同时需要仔细配置，并将其他依赖的JavaScript文件放在合适的位置才可，不像jQuery Mobile和Dojo Mobile那样只需要一个核心文件即可以运行Mobile版本，这也说明Sencha Touch类库的庞大。另外从CPU利用率曲线上表明Sencha Touch的CPU利用率比较高，需要执行的时间也较长。
由于Sencha Touch完全依靠JavaScript生成视图，所以开始渲染（Start Render）指标并不能显示真实的视觉上首次显示时间，首次显示时间还需要视觉载入效果比较。
无Cache情况下，jQuery Mobile比Dojo Mobile能更快的给用户完整的视觉体验，但差距不大。而Sencha Touch的无Cache情况下的首次显示时间却到达10s，这也继承了ExtJs的特点，适合内部高速网络使用。在有cache情况下，Dojo的库比jQuery大10%这个因素已经不起作用，并且Dojo比jQuery稍微快一点，这说明它们在性能上的差距很小。而Sencha Touch在存在Cache的情况下首次视觉显示时间还是比较长，这说明较大的代码库需要解析执行的时间更大。 （2）移动终端测试结果
在测试移动端时，Dojo Mobile显示出一种特性，即视觉首次显示总是先显示出纯HTML效果，之后再出现完整效果。下列图中Dojo Mobile在纯HTML效果出现的时候进行了标注。
由于Dojo在1.7版本后使用了异步加载技术，加载完dojo.js 的base库文件，mobile部分的库文件可以异步下载，这样就可以继续渲染下面的HTML代码了，这导致了Dojo Mobile在第一视觉冲击上要领先于jQuery Mobile和Sencha Touch，但看到的仅仅是纯粹的HTML代码，无任何美工和修正。Dojo并不是所有的HTML代码都可以预先渲染出视觉效果，如Heading测试用例。
移动终端上的测试结果与PC桌面浏览器的测试结果相似，Dojo Mobile与jQuery Mobile载入时间相似，但根据视觉载入显示，完整视觉效果出现时间上jQuery Mobile要领先于Dojo Mobile和Sencha Touch。
Sencha Touch依然受其框架文件大小的限制，在载入时间和视觉显示时间上落后jQuery Mobile较多，落后Dojo Mobile较少。
但是Sencha Touch的优势也很明显，在高配置机器上（JavaScript解析引擎很快）其UI表现相比Dojo Mobile更加丰富，跟jQuery Mobile较为接近。值得一提的是，Sencha Touch只有一个JavaScript库文件和一个CSS库文件，其本身为移动终端专门设计，而Dojo Mobile和jQuery Mobile都是依托现有核心库来扩展。理论上来讲，Sencha Touch会对移动终端的性能优化更多一些，因为其随时都可以修改其专有的核心代码库，而不用兼顾桌面浏览器。
在真机测试（iPhone 4s和ME525+）中，特别是按钮布局测试用例中，在大量按钮存在的情况下，Sencha Touch版本的按钮在点击时能够快速的响应并进行UI上的反馈，Dojo Mobile版本则较慢，而Jquery Mobile非常慢，甚至到了无法点击的程度，卡顿很明显，前端性能不只包括页面切换＼载入时的性能，还包括同一页面视图变化、UI交互的性能，在这一方面，Sencha Touch表现较好较为流畅。
四、结论
由以上的对比分析可得，jQuery Mobile性能与Dojo Mobile性能相近，但jQuery Mobile略胜一筹，Dojo Mobile的学习曲线更高。Sencha Touch在测试中总体表现出了比较差的性能，但随着测试平台性能的提高，Sencha Touch与jQuery Mobile的载入性能差距越来越小。
（1）对网络性能的影响方面：
jQuery Mobile和Dojo Mobile在网络性能方面类似，因为影响网络性能的指标就是请求的文件数目和文件大小，这两个框架在库文件大小、CSS文件大小上总体上相似，jQuery Mobile因其较小的各种库文件要略胜一筹，而Sencha Touch因库文件大小问题在此项目上占据劣势。
对网络性能的影响最差的应该是Dojo Mobile，在页面很简单时，其可能跟jQuery Mobile网络方面性能相差不多，但是随着页面元素、功能的增加，其所需的库文件也迅速增加。而Sencha Touch和JQuery Mobile都是固定数量的库文件，页面功能的增加其网络负载不会增加。Sencha Touch只有一个JavaScript主庫文件，相比JQuery Mobile更有优势。
所以在对网络性能的影响上，Sencha Touch除了其自己库文件较大的缺点外，其库文件数量较少，能提高其网络性能。
（2）对前端性能的影响方面：
库文件的大小不仅仅影响网络性能，还影响浏览器解析和运行的速度。
Sencha Touch在首次显示时间上有cache的情况下还是比jQuery Mobile和Dojo Mobile更慢，从DOM元素个数的测试结果，发现实现相同的功能时，Sencha Touch在DOM中创建的元素数量总体上要大于另外两个框架，但在一些功能点上Sencha Touch优化的较好，呈现出较稳定的趋势，所以Sencha Touch给了浏览器较重的负担。
在前端性能上，Sencha Touch比jQuery Mobile要慢一些，但随着设备性能的增强，差距越来越小，如在iPhone4和iPad 2上Sencha Touch就表现出了不错的前端性能。
参考文献
[1]http：//www.blaze.io/mobile/
[2]http：//jsperf.com/new-date-value/9
[3]http：//dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
[4]http：//www.samdutton.com/navigationTiming/
[5]http：//msdn.microsoft.com/en-us/library/ff975075
作者简介
董振江：现任中兴通讯股份有限公司业务研究院副院长，1995年毕业于哈尔滨工业大学。多年从事交换机、智能网、业务平台和数据业务产品的开发、架构设计等工作，对业务网络架构、通信技术和协议、移动互联网技术、云计算技术等有深入研究。
金怡爱：现就职于中兴通讯股份有限公司，毕业于吉林大学。长期从事Java虚拟机、浏览器内核等技术的研究，近年来主要从事终端应用开发技术相关方面的研究。
李永超：现于北京邮电大学计算机学院就读硕士研究生，本科毕业于西安邮电大学计算机学院。精通Linux编程，长期从事Java开发、Web开发。
张坤：现于北京邮电大学计算机学院就读硕士研究生。
任文慧：本科毕业于山东大学，现于北京邮电大学计算机学院就读硕士研究生。
本文利用WebPageTest和Mobitest工具对移动Web开发框架进行测试并横向的比较分析。分析得出jQuery Mobile性能与Dojo Mobile性能相近，但jQuery Mobile略胜一筹。Sencha Touch在测试中总体表现出了比较差的性能，但随着测试平台性能的提高，Sencha Touch与jQuery Mobile的载入性能差距越来越小。
[关键词]Web框架 HTML5 性能
中图分类号：O631.1+1 文献标识码：O 文章编号：1009―914X（2013）34―0263―03
一、研究背景及现状
Web框架最初是用于支持基于B/S架构的动态网页、网络应用及服务的开发框架。它用于开发在客户端（浏览器）上运行的JavaScript代码程序，主要处理界面展示、Ajax等功能。常见的Web框架有ExtJs、jQuery、Dojo、YUI等。
不同的框架的特性和性能有所差异，因此开发Web应用时，各个框架的特点及优缺点的比较就显得相对重要。
在对Web开发框架进行比较分析时，框架的载入速度和性能是比较分析的重要参考依据。而现有情况下，关于载入速度和性能的结论多是用户主观感受的体现，另外对框架载入速度和网站性能优化测试大多是针对某一个网站或页面进行的自身的纵向测试，没有针对不同框架创造出相同的情景再进行横向比较。这使得现有的Web框架在性能比较上并不够全面。
本文旨在尽力提供这种测试情景，对移动Web开发框架进行横向的比较分析，从而为移动Web开发框架的整体比较提供载入速度和性能方面的参考依据。
二、测试方案
本次测试主要针对jQuery Mobile，Dojo Mobile和Sencha Touch三个Web框架。影响Web页面性能的指标有服务器性能、网络性能和前端性能（主要由浏览器JavaScript解析执行、CSS解析和解压缩数据等方面的性能组成）。其中前端性能是影响用户体验的主要部分，因此本次主要对前端性能进行测试。
本测试中选用了几个典型的最常用的使用组件，即列表，首部导航栏、表单元素和布局作为对比，通过测试工具获得的性能数据做分析和对比。
测试选取了具有Webkit内核的Chrome浏览器，另外综合考虑各种因素后选择具有C/S架构、功能强大、易于扩展的WebPageTest测试工具选为主要测试工具，并搭建了装有Chrome浏览器的专用的桌面测试客户端，移动端则使用Mobitest工具。
（1）WebPageTest：
一个开源的对网页各方面性能指标进行测试的工具，可直接使用其在线版对网页进行性能测试，也可以自己搭建WebPageTest私有服务器进行内网性能测试。
桌面浏览器测试选用Chrome浏览器进行，分别在无cache情况下（即First View，cache和cookie都为空时，用户第一次登陆）和有cache情况下（即Repeat View，在第一次访问完之后，关闭浏览器，再访问一次，这时候的性能）进行测试。
（2）Mobitest：
是专门用来测试iOS和android页面性能的在線服务，可以在线免费使用，但由于移动设备的局限性，能监测到的信息要比桌面上的少很多。
移动端测试时选用三个终端平台，即Android手机终端、iOS平板终端和iOS手机终端，使用移动端的默认浏览器。由于在移动终端上的测试没有桌面测试工具强大、测试指标丰富，因而测试得到的数据与桌面测试并不相同。除此之外，网络性能对在移动端的测试有较大影响，为了消除这种影响，在测评时选择高速稳定的LAN或WiFi而不是慢速GPRS或3G连接。
每次测试对上文提到的测试用例做三组测试，获得如图2的瀑布图，并得到平均页面载入时间、平均页面大小以及视觉载入时间。
从测试结果来看，jQuery Mobile和Dojo Mobile各方面指标差距比较小，但jQuery Mobile的各种类库要比Dojo Mobile小10%，所以jQuery Mobile的各项载入时间在没有cache的情况下比Dojo Mobile快10%左右，但在有Cache的情况，结果相差不大，类库已被缓存，所以差距主要由html文件的大小决定。
和jQuery Mobile相比，Sencha Touch类库明显增大，经查看请求文件可知，主要由JavaScript类库引起，即sencha-touch-all.js（568KB）。Sencha Touch也在努力保持轻量，但瘦身的同时需要仔细配置，并将其他依赖的JavaScript文件放在合适的位置才可，不像jQuery Mobile和Dojo Mobile那样只需要一个核心文件即可以运行Mobile版本，这也说明Sencha Touch类库的庞大。另外从CPU利用率曲线上表明Sencha Touch的CPU利用率比较高，需要执行的时间也较长。
由于Sencha Touch完全依靠JavaScript生成视图，所以开始渲染（Start Render）指标并不能显示真实的视觉上首次显示时间，首次显示时间还需要视觉载入效果比较。
无Cache情况下，jQuery Mobile比Dojo Mobile能更快的给用户完整的视觉体验，但差距不大。而Sencha Touch的无Cache情况下的首次显示时间却到达10s，这也继承了ExtJs的特点，适合内部高速网络使用。在有cache情况下，Dojo的库比jQuery大10%这个因素已经不起作用，并且Dojo比jQuery稍微快一点，这说明它们在性能上的差距很小。而Sencha Touch在存在Cache的情况下首次视觉显示时间还是比较长，这说明较大的代码库需要解析执行的时间更大。 （2）移动终端测试结果
在测试移动端时，Dojo Mobile显示出一种特性，即视觉首次显示总是先显示出纯HTML效果，之后再出现完整效果。下列图中Dojo Mobile在纯HTML效果出现的时候进行了标注。
由于Dojo在1.7版本后使用了异步加载技术，加载完dojo.js 的base库文件，mobile部分的库文件可以异步下载，这样就可以继续渲染下面的HTML代码了，这导致了Dojo Mobile在第一视觉冲击上要领先于jQuery Mobile和Sencha Touch，但看到的仅仅是纯粹的HTML代码，无任何美工和修正。Dojo并不是所有的HTML代码都可以预先渲染出视觉效果，如Heading测试用例。
移动终端上的测试结果与PC桌面浏览器的测试结果相似，Dojo Mobile与jQuery Mobile载入时间相似，但根据视觉载入显示，完整视觉效果出现时间上jQuery Mobile要领先于Dojo Mobile和Sencha Touch。
Sencha Touch依然受其框架文件大小的限制，在载入时间和视觉显示时间上落后jQuery Mobile较多，落后Dojo Mobile较少。
但是Sencha Touch的优势也很明显，在高配置机器上（JavaScript解析引擎很快）其UI表现相比Dojo Mobile更加丰富，跟jQuery Mobile较为接近。值得一提的是，Sencha Touch只有一个JavaScript库文件和一个CSS库文件，其本身为移动终端专门设计，而Dojo Mobile和jQuery Mobile都是依托现有核心库来扩展。理论上来讲，Sencha Touch会对移动终端的性能优化更多一些，因为其随时都可以修改其专有的核心代码库，而不用兼顾桌面浏览器。
在真机测试（iPhone 4s和ME525+）中，特别是按钮布局测试用例中，在大量按钮存在的情况下，Sencha Touch版本的按钮在点击时能够快速的响应并进行UI上的反馈，Dojo Mobile版本则较慢，而Jquery Mobile非常慢，甚至到了无法点击的程度，卡顿很明显，前端性能不只包括页面切换＼载入时的性能，还包括同一页面视图变化、UI交互的性能，在这一方面，Sencha Touch表现较好较为流畅。
四、结论
由以上的对比分析可得，jQuery Mobile性能与Dojo Mobile性能相近，但jQuery Mobile略胜一筹，Dojo Mobile的学习曲线更高。Sencha Touch在测试中总体表现出了比较差的性能，但随着测试平台性能的提高，Sencha Touch与jQuery Mobile的载入性能差距越来越小。
（1）对网络性能的影响方面：
jQuery Mobile和Dojo Mobile在网络性能方面类似，因为影响网络性能的指标就是请求的文件数目和文件大小，这两个框架在库文件大小、CSS文件大小上总体上相似，jQuery Mobile因其较小的各种库文件要略胜一筹，而Sencha Touch因库文件大小问题在此项目上占据劣势。
对网络性能的影响最差的应该是Dojo Mobile，在页面很简单时，其可能跟jQuery Mobile网络方面性能相差不多，但是随着页面元素、功能的增加，其所需的库文件也迅速增加。而Sencha Touch和JQuery Mobile都是固定数量的库文件，页面功能的增加其网络负载不会增加。Sencha Touch只有一个JavaScript主庫文件，相比JQuery Mobile更有优势。
所以在对网络性能的影响上，Sencha Touch除了其自己库文件较大的缺点外，其库文件数量较少，能提高其网络性能。
（2）对前端性能的影响方面：
库文件的大小不仅仅影响网络性能，还影响浏览器解析和运行的速度。
Sencha Touch在首次显示时间上有cache的情况下还是比jQuery Mobile和Dojo Mobile更慢，从DOM元素个数的测试结果，发现实现相同的功能时，Sencha Touch在DOM中创建的元素数量总体上要大于另外两个框架，但在一些功能点上Sencha Touch优化的较好，呈现出较稳定的趋势，所以Sencha Touch给了浏览器较重的负担。
在前端性能上，Sencha Touch比jQuery Mobile要慢一些，但随着设备性能的增强，差距越来越小，如在iPhone4和iPad 2上Sencha Touch就表现出了不错的前端性能。
参考文献
[1]http：//www.blaze.io/mobile/
[2]http：//jsperf.com/new-date-value/9
[3]http：//dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html
[4]http：//www.samdutton.com/navigationTiming/
[5]http：//msdn.microsoft.com/en-us/library/ff975075
作者简介
董振江：现任中兴通讯股份有限公司业务研究院副院长，1995年毕业于哈尔滨工业大学。多年从事交换机、智能网、业务平台和数据业务产品的开发、架构设计等工作，对业务网络架构、通信技术和协议、移动互联网技术、云计算技术等有深入研究。
金怡爱：现就职于中兴通讯股份有限公司，毕业于吉林大学。长期从事Java虚拟机、浏览器内核等技术的研究，近年来主要从事终端应用开发技术相关方面的研究。
李永超：现于北京邮电大学计算机学院就读硕士研究生，本科毕业于西安邮电大学计算机学院。精通Linux编程，长期从事Java开发、Web开发。
张坤：现于北京邮电大学计算机学院就读硕士研究生。
任文慧：本科毕业于山东大学，现于北京邮电大学计算机学院就读硕士研究生。