HTML5 Web Worker

在 HTML5 中提出了工作线程(Web Workers)的概念,即多线程概念,可以将一些大量计算的代码交给web worker运行而不冻结用户界面。

Web Workers 的三大主要特征:

1)能够长时间运行(响应)

2)理想的启动性能

3)理想的内存消耗

Web Workers 允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的及时响应。

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers 就可以通过 postMessage 向任务池发送任务请求,执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。Web Workers 进程能够在不影响用户界面的情况下处理任务,并且,它还可以使用 XMLHttpRequest 来处理 I/O,但通常,后台进程(包括 Web Workers 进程)不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM,只能通过返回消息给创建者的回调函数进行处理。

 

需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程中运行的 JavaScript 文件名称。然后在这个实例上监听 onmessage 事件。最后另一个线程中的 JavaScript 就可以通过调用 postMessage 方法在这两个线程间传递数据了。

 

主程序中,创建worker实例,监听onmessage事件

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Test Web worker</title>
 <script type="text/JavaScript">
     function init(){
         var worker = new Worker('compute.js');
         //event 参数中有 data 属性,就是子线程中返回的结果数据
         worker.onmessage= function (event) {
             // 把子线程返回的结果添加到 div 上
             document.getElementById("result").innerHTML +=
                event.data+"<br/>";
         };
     }
 </script>
 </head>
 <body onload="init()">
 <div id="result"></div>
 </body>
 </html>

在客户端的 compute.js 开辟了一个新的线程,不起阻塞执行的效果,并且提供主线程和新线程之间的数据交互接口。只是简单的重复多次加和操作,最后通过 postMessage 方法把结果返回给主线程,目的就是等待一段时间。而在这段时间内,主线程不应该被阻塞,用户可以通过拖拽浏览器,变大缩小浏览器窗口等操作测试这一现象。这个非阻塞主线程的结果就是 Web Workers 想达到的目的。

 
compute.js 中调用 postMessage 方法返回计算结果

 var i=0;

 function timedCount(){
     for(var j=0,sum=0;j<100;j++){
         for(var i=0;i<1000000;i++){
             sum+=i;
         }
     }
     // 调用 postMessage 向主线程发送消息
     postMessage(sum);
 }

 postMessage("获取计算之前的时间,"+new Date());
 timedCount();
 postMessage("获取计算之后的时间,"+new Date());

演示地址:http://lovermap.sinaapp.com/test/test.html

由于javascript是单线程执行的,在复杂地运算的过程中浏览器不能执行其它javascript脚本,UI渲染线程也会被挂起,从而导致浏览器进入僵死状态。使用web worker将数列的计算过程放入一个新线程里去执行将避免这种情况的出现。

除了可以使用web  worker加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信外;可以在worker中通过importScripts(url)加载另外的脚本文件,使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval(),使用XMLHttpRequest来发送请求,访问navigator的部分属性。

但是也是存在一定的局限性

1.不能跨域加载JS(同源策略限制)

2.worker内代码不能访问DOM

3.各个浏览器对Worker的实现不大一致

4.不是每个浏览器都支持这个新特性

时间: 2024-08-30 16:07:44

HTML5 Web Worker的相关文章

JavaScript多线程之HTML5 Web Worker

在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简述中讲述了JavaScript出于界面元素访问安全的考虑,所以JavaScript运行时一直是被实现为单线程执行的:这也意味着我们应该尽量的避免在JavaScript中执行较长耗时的操作(如大量for循环的对象diff等)或者是长时间I/O阻塞的任务,特别是对于CPU计算密集型的操作. 例如在Jav

HTML5 Web Worker 中的 JavaScript多线程讲解

JavaScript单线程 JavaScript这门语言运行在浏览器中,是以单线程的方式运行的.说到单线程,就得从操作系统进程开始说起.进程和线程都是操作系统的概念.进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间.代码.数据和其它系统资源所组成;进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也会随着进程的终止而被销毁.而线程则是进程内的一个独立执行单元,在不同的线程之间是可以共享进程资源的,所以在多线程的情况下,需要特别注意对临界资源的访问控制.在系统创

深入分析HTML5 Web Worker是利器还是摆设

一.关于Web Worker HTML5几个优势特性里,就包括了Web Worker,这货可以了解为多线程,正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题. 所以它能解决两个问题:一.解决程序阻塞问题:二.提升效率. 二.例子 通常测试效率最常用的无非就是fibonacci了,我们也来个fibonacci性能测试. var start = (new Date()).getTime(); var fibonacci

html5 Web Workers

虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaScript单线程可以看看setTimeout()和setInterval() 何时被调用执行),看个简单的例子证明一下 <!DOCTYPE html> <html> <head>     <title>Web Workers</title> </

利用Web存储工具创建HTML5 Web应用程序

HTML5 提供了新的语义元素,还提供了恰当的使用应用程序缓存器.JavaScript worker.新版本的 XMLHttpRequest 和一种名为 Web 存储的工具创建 HTML Web 应用程序的方式.本文将探讨 Web 存储的强大功能,以及它成为一种优于 cookies 的存储方法的原因.通过本文您将了解基本概念.浏览器支持和 HTML5 Web 存储对象. Cookies 从 JavaScript 出现之初就一直存在,所以在 Web 上存储数据并不是个新概念.不过Web 存储是数据

Web worker多线程的研究

HTML5支持了Web Worker这样的API,允许网页在安全的情况下执行多线程代码.不过Web Worker实际上受到很多限制,因为它无法真正意义上共享内存数据,只能通过消息来做状态通知,所以甚至不能称之为真正意义上的"多线程". Web Worker的接口使用起来很不方便,它基本上自带一个sandbox,在沙箱中跑一个独立的js文件,通过 postMessage和 onMessge来和主线程通信: var worker = new Worker("my.js"

JavaScript中的Web worker多线程API研究_javascript技巧

HTML5支持了Web Worker这样的API,允许网页在安全的情况下执行多线程代码.不过Web Worker实际上受到很多限制,因为它无法真正意义上共享内存数据,只能通过消息来做状态通知,所以甚至不能称之为真正意义上的"多线程". Web Worker的接口使用起来很不方便,它基本上自带一个sandbox,在沙箱中跑一个独立的js文件,通过 postMessage和 onMessge来和主线程通信: 复制代码 代码如下: var worker = new Worker("

HTML5 Web Storage

简介 HTML5 web storage, better than cookies. more secure and faster data store in name/value pairs the storage limit is at least 5MB     1. 发展过程:       2. 浏览器支持情况:       3. HTML5 Web Storage 提供如下两种对象: window.localStorage - stores data with no expiratio

Html5 Web的5中离线存储方式之localStorage

Html5 Web的5中离线存储方式之localStorage 在HTML5越来越流行的今天,如果你还不知道离线存储,那就说明你落后了很多. HTML5的离线存储方式有多种:Web SQL Database.LocalStorage.Cookie.WebStorage.IndexedDB.FileSystem. Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展.我就不多说了. 今天我们主要看LocalStorage这种最简单的