HTML5 API worker使用

时间:2022-02-17 07:49:50

使用Worker类加载一个外部js文件来创建一个线程,这个线程不会阻塞主线程。将大量的与DOM无关的工作放在这个worker线程里,可以优化网页的响应速度

Worker线程运行环境包含:

1.一个浏览器对象,只包含四个属性:appName,appVersion,userAgent,,platform

2.一个location对象,和window里的一样,只是所有的属性是只读的

3.一个self对象指向全局工人线程对象

4.一个importScripts()方法,使工人线程可以加载外部JavaScript文件

5.所有ECMAScript对象,例如Object、Array、Data

6.XMLHttpRequest构造器

7.setTimeout和setInterval方法

8.close方法立即停止工人线程

二、使用Worker

1..创建worker线程

var worker=new Worker(‘code.js‘);//code.js指一个完全独立的js文件

2.worker线程交互。postMessage()用于传递数据,onmessage事件用于接收数据

var worker=new Worker(‘lib/code.js‘); //一定要在一个域内 var data=‘hello world‘; worker.postMessage(data); worker.onmessage=function(event){ alert(event.data); }
//lib/code.js self.onmessage=function(event){ self.postMessage(‘收到消息‘+event.data); }

3.加载外部文件

  1.通过importScripts()方法加载外部文件

  2.以阻塞方式调用importScripts,在所有文件加载完成并执行之后,脚本继续运行。

  3.在UI线程之外运行,阻塞不会影响UI响应

importScripts(‘file.js‘,‘file2.js‘);

HTML5 API worker使用