H5 Web Workers

一,web worker介绍
1.javaScript是单线程的。

2.JavaScript的单线程机制会带来一个问题,当有一些非常复杂的任务需要处理时,页面不得不需要等待任务处理完成才能响应用户的操作,也就是说页面被阻塞了,这对于页面的响应及用户体验都会带来一些负面的影响。

3.为了解决这个问题,同时也是为了利用多核CPU的计算能力,HTML5提出了Web Worker标准,允许JavaScript创建多个线程。

4.简单来说Web Worker就是一个运行在后台的JavaScript线程,并且不会影响页面的响应。

5.Web Worker 可以分为两种不同线程类型,一个是专用线程 Dedicated Worker,一个是共享线程 Shared Worker。

二,web worker的限制
1.子线程由js引擎管理,运行在一个全新的环境WorkerGlobalScope下,因此web worker有几点限制。
Web Worker无法访问DOM节点;
Web Worker无法访问全局变量或是全局函数;
Web Worker无法调用alert()或者confirm之类的函数;
Web Worker无法访问window、document之类的浏览器全局变量。

三,web worker语法

let worker= new Worker('worker.js')
//主线程
var worker = new Worker('worker.js');
worker.onmessage = function (e) {
    var data = e.data;
}
var messageData = {
    message: 'hello worker!'
};
worker.postMessage(messageData);
//子线程
self.onmessage = function(e) {
    var messages = e.data;  // e.data为{message: 'hello worker!'}
    var workerResult = {};
    // do something
    ...
    postMessage(workerResult);
}

你可能感兴趣的:(周记,前端)