web worker 简介

web worker 简介

通常，浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态，而HTML5的Web Worker就是为了解决这个问题。通过worker线程完成密集计算，避免程序的阻塞和页面的卡顿(fps过低)

示例

用fibonacci数列来模拟测试

worker-test.html

worker.js

function fibonacci(n) {
    return n < 2 ? n : arguments.callee(n-1) + arguments.callee(n-2);
}

self.addEventListener('message', function (event) {
    let result = fibonacci(event.data);
    self.postMessage(result);
});



// 可用 setTimeout , setInterval
setTimeout(() => {
    console.log('timeout..');
}, 100);

setInterval(() => {
    console.log('setInterval...');
}, 200);

// 可发起ajax
fetch('data.json').then(res => res.json()).then(data => {console.log(data, '<--json data')});

// 可访问 location， navigator
console.log(location);
console.log(navigator);

// worker.js的执行上下文为 self (worker实例), 
// self上的属性和方法可直接调用
console.log(typeof addEventListener);
console.log(typeof postMessage);

假设主页面需要多次执行耗时的操作(如: fibonacci), 可如下用worker来异步执行.

跨域与脚本引入

在主页面实例化worker, new Worker('/url/to/worker.js') worker脚本必须和主页面同域；在worker脚本中，可以 self.importScripts('url/to/script.js') 导入任何域的脚本, 多个 self.importScripts() 是顺序同步加载的

worker的方法

• worker.terminate() 终止worker线程

限制

• 不能访问主页面的全局变量和函数，没有 window, document; 但可访问 location, navigator
• 支持setTimeout, setInterval, 可发起ajax
• worker不能访问和操作dom
• postMessage传的数据都会被复制，不会指向同一个内存地址

转载于:https://www.cnblogs.com/stephenykk/p/8608450.html