使用HTML5 Web Worker提高Web的应用性能研究.docx
《使用HTML5 Web Worker提高Web的应用性能研究.docx》由会员分享，可在线阅读，更多相关《使用HTML5 Web Worker提高Web的应用性能研究.docx（8页珍藏版）》请在冰豆网上搜索。
使用HTML5WebWorker提高Web的应用性能研究
使用HTML5WebWorker提高Web的应用性能研究
摘要：
JavaScript传统上是单线程的，在HTML页面中执行一个需较长时间运行的脚本会阻塞所有的页面功能直至脚本完成。
WebWorker是HTML5提供的JavaScript多线程解决方案。
解析了WebWorker的工作原理和过程；提供了WebWorker代码示例和代码调试方法；说明了使用WebWorker如何提高Web应用的性能。
由于WebWorker相对较新，目前关于WebWorker的示例和文献非常有限。
该研究院提供了WebWorker的参考应用场景及进一步研究和应用的方向。
关键词：
HTML5；WebWorker；JavaScript；多线程
1HTML5WebWorker背景介绍
WebWorker无疑是最新版Web浏览器最酷最炫的特征。
WebWorkers是HTML5提供的一个JavaScript多线程解决方案。
使用WebWorker允许在网页上并发运行多个JavaScript脚本而不会阻塞用户界面。
从2008年W3C制定出第一个HTML5草案开始，HTML5承载了越来越多崭新的特性和功能。
它不但强化了Web系统或网页的表现性能，而且还增加了对本地数据库等Web应用功能的支持，其中，最重要的一个便是对多线程的支持。
在HTML5中提出了工作线程（WebWorker）的概念，并且规范出WebWorker的三大主要特征：
能够长时间运行（响应）、理想的启动性能以及理想的内存消耗。
WebWorker允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应[1]。
在WebWorker出现之前，JavaScript是现代Web应用程序的核心。
JavaScript和DOM核心上是单线程的，这意味者在任何时候都只能执行一个JavaScript方法，当在HTML页面中执行一个需较长时间运行的脚本会阻塞所有的页面功能直至脚本完成。
页面UI元素是不可响应的，动画会停顿，应用中的其它代码都不能执行。
当需要使用JavaScript进行较大量的计算时，需要将任务分成小的代码块，使用timer来分离各个代码块的执行，这样执行的速度会变慢。
而有了WebWorker，就可以将一些大计算量的代码交由WebWorker运行而不冻结用户界面。
WebWorker独立于浏览器UI线程，是在后台装载和运行的JavaScript脚本，独立于其它脚本，不会影响页面的性能。
用户可以做任何愿意做的事情：
点击、选取内容等等，而此时WebWorker在后台运行[2]，这样就可以同时执行多个JS任务而不会阻塞浏览器。
WebWorker适合的领域包括：
异步交互、大规模计算如编码、解码大字符串、复杂数学运算以及大数组排序；后台服务器交互以及后台下载等。
WebWorker极大地提升了用户体验。
WebWorker打破了传统JavaScript的单线程模式，引入了多线程编程模式。
一个Worker是一个独立的线程，有多个任务需要处理的Web应用程序不再需要逐个处理任务，反之，应用程序可以将任务分配给不同的Worker。
由于WebWorker相对较新，目前关于WebWorker的示例和文献非常有限，本文所引用文献直接来自Microsoft和W3school技术支持网站。
2WebWorker和AJAX比较
解决以上JavaScript单线程问题，推荐的方法是采用JavaScript异步编程模式（AJAX-AsynchronousJavaScriptAndXML）。
关于更多JavaScript异步编程模式请参见文献[3]。
尽管异步编程能够解决某些JavaScript单线程问题，但其性能仍然还有缺陷。
另外，应用程序在某些应用场景中，可能需要持续的计算、监控或者后台的处理，这些也是AJAX无法做到的，而WebWorker的引入能够解决上述问题。
WebWorker允许应用程序按照需要启动新的独立线程。
3浏览器支持
目前主流的浏览器新版本都支持WebWorker。
FireFox：
3.5+
Safair：
4+
Chrome3+
Opera：
10+
InternetExplorer以前的版本不支持，版本10和使用JavaScript的Windows应用商店引入了对WebWorker的支持[4]。
另外苹果的iOS5也增加了WebWorker的支持。
4WebWorker工作原理与过程
WebWorker允许web应用根据需要创建另外的线程。
WebWorker的基本原理就是在当前JavaScript的主线程中，使用Worker类加载一个JavaScript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：
postMessage，onmessage。
需要注意的是，尽管WebWorkers能实现多线程，但它们之间以及与主线程之间并不使用共享数据，这样使得编程模型更加简单。
在Worker和主线程之间的通信是通过消息传递完成的。
Workers是相对重量级的线程，需要相当的时间来启动，其取决于应用的要求，可以在应用本身初始化的时候实例化Worker并持续使用Worker，而不是每次使用的时候实例化然后关闭。
需要注意的是WebWorkers对DOM没有访问权限。
它们可以访问标准JavaScript函数库以及少量像XHR、location和navigator这样的API。
使用WebWorker主要分为以下几部分：
（1）Web主线程。
①通过Worker=newWorker（url）加载一个JS文件来创建一个Worker，同时返回一个Worker实例；
②通过Worker.postMessage（data）方法来向Worker发送数据，并启动Worker；
③绑定Worker.onmessage方法来接收从Worker发送过来的数据；
④可以使用Worker.terminate（）来终止一个Worker的执行。
（2）Worker工作线程。
①通过postMessage（data）方法来向主线程发送数据；
②绑定onmessage方法来接收主线程发送过来的数据。
另外，可以在Worker线程中通过importScripts（url）加载另外的脚本文件，使得WebWorker功能更加强大。
5WebWorker实例代码以及代码调试
5.1完整的WebWorker代码示例
myWorker.js
//JavaScript文件
onmessage=function（event）
{
//receivethedatasentbythemainpagethroughevent.data
vard=event.data；
//sendthereceiveddataplus“fromworker“backtothemainpage
postMessage（d+"fromworker！
"）；
}
HTML页面：
HTMLPage.htm
//www.w3.org/1999/xhtml">
MyFirstWebPageUsingWebWorker
Startworker
functionstartWorker（）{
try{
//createanewworker
varmyWorker=newWorker（"myWorker.js"）；
//sendamessagetostarttheworker
varinfo="HelloWorld"；
myWorker.postMessage（info）；
//receiveamessagefromtheworker
myWorker.onmessage=function（event）{
//dosomethingwhenreceivingamessagefromworker
alert（event.data）；
}
}
catch（ex）{
alert（ex）；
}
}
var_userid='zju0@';var_siteid=369;var_istoken=1;var_model='Model03';WebPageSpeed=156;UrchinTrack（）;