JS：Web Worker

由于JS单线程特点，所有任务只能依次执行，无法利用CPU多线程优势，进行计算密集或高延迟任务会造成线程阻塞和UI卡顿。

Web Worker可以在JS主线程外创建一个Worker线程来执行JS任务，与主线程互不干扰，减轻主线程负担。

由于Worker线程一旦创建成功，即会一直运行，不受主线程打断，容易造成资源浪费，不应过度使用，且当Worker使用完成后应关闭。

Web Worker使用是需注意：

脚本来源：worker进程中运行的脚本必须来源于网络资源，无法加载本地资源
同源限制：worker进程中运行的脚本须和主进程同源
DOM限制：worker进程无法读取当前页面的DOM对象（docmuent）
BOM限制：worker进程无使用window对象的alert、confirm方法，但可以获取和使用location、navigator对象，还可以发送异步请求

创建worker：

// 主线程
var worker = new Worker('http://static.domain.com/js/worker.js', // 脚本地址{ key: 'value' } // 可传递参数
);

// worker线程
// 使用参数
self.key // 'value'
// 加载其他脚本
self.importScripts('http://static.domain.com/js/worker1.js','http://static.domain.com/js/worker2.js'
);
// 创建其他worker
var worker = new Worker('http://static.domain.com/js/worker3.js', // 脚本地址
);

关闭worker

// 主线程
worker.terminate();

//  worker线程
self.close();

worker线程和主线程不在同一个上下文环境，必须通过消息完成通信：

// 主线程
// 调用postMessage方法向worker线程传递数据
worker.postMessage({ key: 'value' })
// 除了字符串，json对象等格式，worker还可以接收 File、Blob、ArrayBuffer等类型数据
worker.postMessage(new ArrayBuffer(10));
// 监听onmessage事件接收worker线程传入的数据
worker.onmessage = function (event){console.log(event.data)
}

// worker线程
// 监听onmessage事件 接收 创建当前worker的线程 传入的数据
self.onmessage = function(event){console.log(event.data)
}
// 调用postMessage方法 向创建当前worker的线程 传递数据
self.postMessage(['hello', 'world'])

js允许当前线程把数据对象控制权转移给其他线程，转移后当前线程将无法继续使用这些对象，以避免多个线程同时修改数据时产生异常，支持转移的对象类型如ArrayBuffer，MessagePort或ImageBitmap的实例对象：

// 主线程
// 监听onmessage事件接收worker线程传入的数据
worker.addEventListener('message', function (event) {console.info('accept ArrayBuffer:' + event.data.title + ' from worker');
});
// 调用postMessage方法传递ArrBuffer到worker线程
var arrBuf = new ArrayBuffer(10);
worker.postMessage({title: 'arrBuf',arrBuf
},[arrBuf // 将数据对象控制权交给worker线程
]);

// worker 线程
// 监听onmessage事件接收主线程传入的数据
self.onmessage = function (event) {console.info('accept ArrayBuffer:' + event.data.title + ' from main');// 处理数据..// doSomethingWithArrBuff...// 调用postMessage方法传递ArrBuffer，并将数据对象控制权交还给主线程self.postMessage({title:'do_sendMainArrBuff', arrBuf}, [arrBuf]);
}

JS：Web Worker相关推荐

Node.js：Web模块、文件系统
一.web模块 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL,与客户端的网络 ...
Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
HTML5中Web Worker技术的使用实例
web worker是html5中新特性中非常吸引人的技术亮点之一,我们可以把它理解为javascript中的多线程技术,我们知道javascript语言的执行环境是单线程的,浏览器执行某段程序的时候 ...
web Worker简介、web Worker报错分析、作用
web Worker: web Worker是运行在后台的javascript,不会影响性能,常用于高耗费CPU的任务,必须部署到线上才可以正常使用,这里有三个方法比较重要,需要注意: postMes ...
还没使用过Web Worker，推荐一款开源工具Workerize，快速上手
还没使用过Web Worker,推荐一款开源工具Workerize,快速上手开源项目:https://github.com/developit/workerize 将模块移动到 Web 辅助角色中, ...
初学HTML5：Web workers
1.什么是Web worker? 当在HTML页面中执行普通脚本时,页面是不可响应的,直到脚本已完成. 而Web worker是运行在后台的javascript,独立于其他脚本,不会影响页面性能. 2 ...
web worker 的使用方法和实际场景
一:web workers的基本原理我们都知道,我们的javascript采用的是单线程模型,所有的任务都在一个主线程中完成,一次只能执行一个任务,如果有多个任务需要被执行的话,那么后面的任务会依次 ...
Dedicated Web Worker 和 Shared Web Worker
当在 HTML 页面中执行脚本(JS)时,页面的状态是不可响应的,直到脚本已完成. 通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程.Web Wo ...
关于Web Worker你必须知道的7件事
原文:http://www.developer.com/lang/jscript/7-things-you-need-to-know-about-web-workers.html 译者: Rock(r ...

JS：Web Worker

JS：Web Worker相关推荐

最新文章

热门文章