首页 > 代码库 > HTML5 API worker使用

HTML5 API worker使用

2024-09-13 11:25:52   215人阅读

一、web worker

使用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=http://www.mamicode.com/‘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使用


联系
我们