使用HTML5 Web Worker提高Web的应用性能研究

使用HTML5 Web Worker提高Web的应用性能研究

摘要：JavaScript传统上是单线程的，在HTML页面中执行一个需较长时间运行的脚本会阻塞所有的页面功能直至脚本完成。Web Worker 是HTML5 提供的JavaScript多线程解决方案。解析了Web Worker 的工作原理和过程；提供了Web Worker代码示例和代码调试方法；说明了使用Web Worker如何提高Web应用的性能。由于Web Worker 相对较新，目前关于Web Worker的示例和文献非常有限。该研究院提供了Web Worker的参考应用场景及进一步研究和应用的方向。

关键词：HTML5；Web Worker；JavaScript；多线程

1HTML5 Web Worker背景介绍

Web Worker无疑是最新版Web浏览器最酷最炫的特征。Web Workers 是HTML5 提供的一个JavaScript多线程解决方案。使用Web Worker允许在网页上并发运行多个JavaScript 脚本而不会阻塞用户界面。

从2008 年W3C 制定出第一个HTML5 草案开始，HTML5 承载了越来越多崭新的特性和功能。它不但强化了Web 系统或网页的表现性能，而且还增加了对本地数据库等Web 应用功能的支持，其中，最重要的一个便是对多线程的支持。在HTML5 中提出了工作线程（Web Worker）的概念，并且规范出Web Worker 的三大主要特征：能够长时间运行（响应）、理想的启动性能以及理想的内存消耗。Web Worker 允许开发人员编写能够长时间运行而不被用户所中断的

后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应[1]。

在Web Worker出现之前，JavaScript是现代Web应用程序的核心。JavaScript和DOM核心上是单线程的，这意味者在任何时候都只能执行一个JavaScript方法，当在HTML页面中执行一个需较长时间运行的脚本会阻塞所有的页面功能直至脚本完成。页面UI元素是不可响应的，动画会停顿，应用中的其它代码都不能执行。当需要使用JavaScript进行较大量的计算时，需要将任务分成小的代码块，使用timer来分离各个代码块的执行，这样执行的速度会变慢。而有了Web Worker，就可以将一些大计算量的代码交由Web Worker运行而不冻结用户界面。

Web Worker独立于浏览器UI线程，是在后台装载和运行的JavaScript脚本，独立于其它脚本，不会影响页面的性能。用户可以做任何愿意做的事情：点击、选取内容等等，而此时Web Worker在后台运行[2]，这样就可以同时执行多个JS任务而不会阻塞浏览器。Web Worker适合的领域包括：异步交互、大规模计算如编码、解码大字符串、复杂数学运算以及大数组排序；后台服务器交互以及后台下载等。Web Worker极大地提升了用户体验。

Web Worker 打破了传统JavaScript的单线程模式，引入了多线程编程模式。一个Worker 是一个独立的线程，有多个任务需要处理的Web 应用程序不再需要逐个处理任务，反之，应用程序可以将任务分配给不同的Worker。

由于Web Worker相对较新，目前关于Web Worker的示例和文献非常有限，本文所引用文献直接来自Microsoft 和W3school 技术支持网站。

2Web Worker和AJAX比较

解决以上JavaScript单线程问题，推荐的方法是采用JavaScript 异步编程模式（AJAX-Asynchronous JavaScript And XML）。关于更多JavaScript异步编程模式请参见文献[3]。

尽管异步编程能够解决某些JavaScript单线程问题，但其性能仍然还有缺陷。另外，应用程序在某些应用场景中，可能需要持续的计算、监控或者后台的处理，这些也是AJAX无法做到的，而Web Worker 的引入能够解决上述问题。Web Worker允许应用程序按照需要启动新的独立线程。

3浏览器支持

目前主流的浏览器新版本都支持Web Worker。

FireFox：3.5+

Safair：4+

Chrome 3+

Opera ：10+

Internet Explorer以前的版本不支持，版本10和使用JavaScript 的Windows 应用商店引入了对Web Worker 的支持[4]。另外苹果的iOS 5 也增加了Web Worker的支持。

4Web Worker工作原理与过程

Web Worker允许web应用根据需要创建另外的线程。Web Worker 的基本原理就是在当前JavaScript的主线程中，使用Worker类加载一个JavaScript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

需要注意的是，尽管Web Workers能实现多线程，但它们之间以及与主线程之间并不使用共享数据，这样使得编程模型更加简单。在Worker和主线程之间的通信是通过消息传递完成的。Workers 是相对重量级的线程，需要相当的时间来启动，其取决于应用的要求，可以在应用本身初始化的时候实例化Worker并持续使用Worker，而不是每次使用的时候实例化然后关闭。需要注意的是Web Workers 对DOM没有访问权限。它们可以访问标准JavaScript函数库以及少量像XHR、location和navigator这样的API。

使用Web Worker主要分为以下几部分：

（1）Web主线程。

①通过Worker = new Worker（url ）加载一个JS文件来创建一个Worker，同时返回一个Worker实例；

②通过Worker.postMessage（data ）方法来向Worker发送数据，并启动Worker；

③绑定Worker.onmessage方法来接收从Worker发送过来的数据；

④可以使用Worker.terminate（）来终止一个Worker的执行。

（2）Worker工作线程。