使用 web workers 提高 web 应用程序可用性

《使用 web workers 提高 web 应用程序可用性》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、页码，1/9使用WebWorkers提高web应用程序可用性Wei(Marshall)Shi,软件开发人员,IBMBoWang,软件工程师,IBM简介：WebWorkers，一个新的JavaScript编程模型，可以提高您web应用程序的交互性。有了它您就可以以一种多线程方法运行JavaScript，而且可以在后台运行脚本而不依赖任何用户界面脚本。本文介绍了WebWorkers，并引导您了解一个实践示例，向您展示如何将WebWorkers运用到您的web应用程序中。标记本文！发布日期：2011年11月02日级别：中级原创语言：英文简介随着Ajax和Web2.0应用程序的出现，终端用户被快速响应

2、的web应用程序宠坏了。要让web应用程序响应得更快，瓶颈一定要解决。瓶颈包括JavaScript和后台I/O庞大的计算量，这需要从主UI显示流程中移除，交给WebWorkers处理。WebWorkers规范提供不依赖任何用户界面脚本在后台运行脚本的能力。长期运行脚本不会被响应单击或其他用户交互的脚本中断。WebWorkers允许执行长期任务，同时也不影响页面响应。WebWorkers出现之前，JavaScript是现代web应用程序的核心。JavaScript和DOM本质上都是单线程的：在任何时间都只能执行一个JavaScript方法。即使您的计算机有4个内核，在进行长期计算时，也只有一个内

3、核比较繁忙。例如，您在计算到达月球的最佳轨道时，您的浏览器不能渲染一个显示轨迹的动画，以及—同时—对用户事件作出响应（比如鼠标单击或键盘输入）。原来的HTML5中，WebWorkersAPI被分离出去成为独立的规范。一些浏览器，比如Firefox3.5、Chrome3和Safari4可以实现大部分WebWorkersAPI。单击这里，查看如何使您的浏览器更好地支持WebWorkers。WebWorkers打破了传统JavaScript的单线程模式，引入了多线程编程模式。一个worker是一个独立的线程。有多个任务需要处理的web应用程序不再需要逐个处理任务。反之，应用程序可以将任务分配给不同的

4、workers。在本文中，您将学习WebWorkersAPI。一个实例引导您逐步使用WebWorkers来构建一个web页面。从下面的下载表格下载本文示例的源代码。回页首基本概念WebWorkers的基本组成：Worker一个新线程，在后台运行，不会阻塞任何主用户界面脚本（作为后台脚本被调用）。Workers是相对重量级的，不要大规模使用。一个worker可以执行不少任务，包括并行计算、后台I/O、以及客户端数据库操作。worker不应该页码，2/9中断主UI或直接操作DOM；它应该向主线程返回一个消息，并让主线程更新主UI。Subworker在一个worker中创建的worker。Subwo

5、rkers必须与父页面同根同源。subworkers的URI是根据父worker的地址而不是自己页面地址确定的。Sharedworker一个可以被多个页面通过多个连接所使用的worker，共享worker和普通worker的工作方式略有不同，只有一小部分浏览器支持这一特性。回页首WebWorkersAPI本小节介绍WebWorkersAPI的基本概念.创建一个worker要创建一个新worker，您只需要调用worker构造函数，worker脚本URL是惟一参数。worker创建完成的同时启动一个新线程（或者可能是一个新进程，根据您浏览的实现而定）。worker完成工作或者遇到一个错误时，您可

6、以使用作业实例的onmessage和onerror属性从worker获取通知。清单1是一个样例worker。清单1.样例workermyWorker.js//receiveamessagefromthemainJavaScriptthreadonmessage=function(event){//dosomethinginthisworkervarinfo=event.data;postMessage(info+“fromworker!”);};如果您运行清单2中的JavaScript代码，您将得到“HelloWorldfromworker”。清单2.主JavaScript线程中的Worker

7、//createanewworkervarmyWorker=newWorker("myWorker.js");//sendamessagetostarttheworkervarinfo=“HelloWorld”;myWorker.postMessage(info);//receiveamessagefromtheworkermyWorker.onmessage=function(event){//