使用HTML5 Web Worker提高Web应用性能探究.docVIP

使用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； 多线程 中图分类号：TP302文献标识码：A文章编号文章编号：1672-7800（2013）012-0047-05 作者简介：邱珊（1970-），女， 硕士， 武汉理工大学华夏学院讲师，研究方向为软件工程、计算机安全和计算机基础教育。 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以前