JavaScript之Web Worker

BigNerdCoding 发布于2019-08-23 11:56 / 3006人阅读

摘要：使用要点同源限制分配给线程运行的脚本文件，必须与主线程的脚本文件同源。限制线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的对象，也无法使用这些对象。通信联系线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

介绍

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O  (尽管responseXML和channel属性总是为空)。一旦创建， 一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。

Web Worker使用要点

同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

DOM 限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

通信联系：Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

脚本限制：Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

文件限制：Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。后面我们允许会做处理。

安装http-server

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。所以我们得起一个项目。使用http-server最简单
安装：

> cnpm i -g http-server

使用：

> http-server

基本使用

我们新建一个文件夹名叫worker，里面新建三个文件分别是

index.html
main.js
worker.js

新建一个worker线程很简单，只需：

var worker = new Worker("worker.js")

main.js:

var worker = new Worker("./worker.js")
console.log("worker running")
worker.addEventListener("message",e => {
    console.log("main: ", e.data);
})
// 也可使用：
// worker.onmessage = (e)=>{
//     console.log("main: ", e.data);
// }
worker.postMessage("hello worker,I am from main.js")

worker.js:

console.log("worker task running")
onmessage = (e)=>{
    console.log("worker task receive", e.data);
    // 发送数据事件
    postMessage("Hello, I am from Worker.js");
}

在worker文件夹下，命令行输入http-server,启动项目，用浏览器打开，看控制台：

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js

从上面可以看到，worker通过onmessage来监听数据，通过postMessgae来发送数据

终止 worker

worker.terminate();

处理错误

worker.addEventListener("error",  (e) => {
  console.log("main error", "filename:" + e.filename + "message:" + e.message + "lineno:" + e.lineno;
});

event.filename: 导致错误的 Worker 脚本的名称；

event.message: 错误的信息；

event.lineno: 出现错误的行号；

加载外部脚本

main.js

var worker = new Worker("./worker1.js");

worker1.js

console.log("I"m worker1")
importScripts("worker2.js", "worker3.js");
// 或者
// importScripts("worker2.js");
// importScripts("worker3.js");

worker2.js

console.log("I"m worker2")

worker3.js

console.log("I"m worker3")

兼容性

https://caniuse.com/#feat=webworkers
兼容性还不是很乐观，不过在移动端的兼容性还不错

参考

使用 Web Workers
Web Worker 使用教程

Github

wclimb

GPU云服务器云服务器 web-worker web前端javascript worker apache worker

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97704.html

JavaScript 工作原理之七－Web Workers 分类及 5 个使用场景

摘要：最后，我们将会介绍个的使用场景。异步编程的局限性前面我们了解到异步编程及其使用时机。请求是一个很好的异步编程的使用场景。整个是基于单线程环境的而部分可以突破这方面的限制。最佳使用场景迄今为止，我们列举了的长处及其限制。 Web Workers 分类及 5 个使用场景原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。这是 JavaScri...

cartoon 2019-08-22 17:23 评论0 收藏0
构建 Web 应用之 Service Worker 初探

摘要：诞生之初，是单线程的。当接收到服务端的响应之后，便通过回调函数执行之后的操作。冲锋基于事件驱动。拥有拦截请求消息推送静默更新地理围栏等服务。控制时处于两种状态之一终止以节省内存监听获取和消息事件。支持的所有事件五销毁浏览器决定是否销毁。这次体验一种新的博客风格，我们长话短说，针针见血。 showImg(https://segmentfault.com/img/remote/14600...

voidking 2019-08-21 16:50 评论0 收藏0
漫谈前端性能突破 React 应用瓶颈

摘要：表示调用栈在下一将要执行的任务。两方性能解药我们一般有两种方案突破上文提到的瓶颈将耗时高成本高易阻塞的长任务切片，分成子任务，并异步执行这样一来，这些子任务会在不同的周期执行，进而主线程就可以在子任务间隙当中执行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以来是前端开发中非常重要的话题...

whlong 2019-08-26 12:10 评论0 收藏0