基础知识

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > 基础知识 > JS多线程webworker应用场景

JS多线程API webworker应用场景有哪些

作者：杨明月luna

这篇文章主要介绍了JS多线程API webworker应用场景有哪些,加密数据,预取数据,预渲染,复杂数据处理场景,预加载图片需要的朋友可以参考下

以前我们总说，JS是单线程没有多线程，当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验，从而需要设置把任务放在任务队列中；执行任务队列中的任务也并非多线程进行的，然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API，我们一起来看一看 Web Worker 是什么，怎么去使用它，在实际生产中如何去用它来进行产出。

1. 概述

Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主(通常是UI)线程运行而不被阻塞。

它的作用就是给JS创造多线程运行环境，允许主线程创建worker线程，分配任务给后者，主线程运行的同时worker线程也在运行，相互不干扰，在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行，这样主线程就会变得轻松，不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力，而是浏览器作为宿主环境提供了JS一个多线程运行的环境。

不过因为worker一旦新建，就会一直运行，不会被主线程的活动打断，这样有利于随时响应主线程的通性，但是也会造成资源的浪费，所以不应过度使用，用完注意关闭。或者说：如果worker无实例引用，该worker空闲后立即会被关闭；如果worker实列引用不为0，该worker空闲也不会被关闭。

看一看它的兼容性

BrowserIEEdgeFireFoxChromeSafari
version10+12+3.5+4+4+

2. 使用

2.1 限制

worker线程的使用有一些注意点

2.2 web worker例子

在主线程中生成 Worker 线程很容易：

var myWorker = new Worker(jsUrl, options)

Worker()构造函数，第一个参数是脚本的网址(必须遵守同源政策)，该参数是必需的，且只能加载 JS 脚本，否则报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });

// Worker 线程
self.name // myWorker

关于api什么的，直接上例子大概就能明白了，首先是worker线程的js文件：

// workerThread1.js
let i = 1

function simpleCount() {
    i++
    self.postMessage(i)
    setTimeout(simpleCount, 1000)
}

simpleCount()

self.onmessage = ev => {
    postMessage(ev.data + ' 呵呵~')
}

在HTML文件中的body中：

Worker 输出内容： id='app'>

type='text' title='' id='msg'>

onclick='sendMessage()'>发送

onclick='stopWorker()'>stop!

可以自己运行一下看看效果，上面用到了一些常用的api

主线程中的api， worker表示是 Worker 的实例：

Worker线程中全局对象为 self，代表子线程自身，这时 this指向 self，其上有一些api：

注意， w.postMessage(aMessage,transferList) 方法接受两个参数， aMessage 是可以传递任何类型数据的，包括对象，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。一个可选的 Transferable对象的数组，用于传递所有权。如果一个对象的所有权被转移，在发送它的上下文中将变为不可用(中止)，并且只有在它被发送到的worker中可用。可转移对象是如ArrayBuffer，MessagePort或ImageBitmap的实例对象， transferList数组中不可传入null。

更详细的API参见 MDN - WorkerGlobalScope。

worker线程中加载脚本的api：

importScripts('script1.js') // 加载单个脚本

importScripts('script1.js', 'script2.js') // 加载多个脚本

3. 实战场景

个人觉得，Web Worker我们可以当做计算器来用，需要用的时候掏出来摁一摁，不用的时候一定要收起来~

// 主线程
let w = new Worker("js/workers.js");
w.onmessage = function (event) {
    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(event.data);
    document.querySelector('#result').appendChild(img)
}

// worker线程
let arr = [...好多图片路径];
for (let i = 0, len = arr.length; i < len; i++) {
    let req = new XMLHttpRequest();
    req.open('GET', arr[i], true);
    req.responseType = "blob";
    req.setRequestHeader("client_type", "DESKTOP_WEB");
    req.onreadystatechange = () => {
        if (req.readyState == 4) {
            postMessage(req.response);
        }
    }
    req.send(null);
}

在 Web Workers 实战的时候注意：

以上就是JS多线程API webworker应用场景有哪些的详细内容，更多关于JS多线程webworker应用场景的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文