阅读 56

worker 多线程

worker使用场景

js是单线程运行的,在遇到一些需要处理大量数据的js时,可能会阻塞页面的加载,造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。

worker语法

const worker=new Worker(aURL, options)
复制代码

它有两个参数:

aURL(必须)是一个DOMString 表示worker 将执行的脚本的URL。它必须遵守同源策略。

options (可选)它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程

worker的属性

Worker.onerror:指定 error 事件的监听函数

Worker.onmessage:指定 message 事件的监听函数,发送过来的数据在Event.data属性中。

Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。

worker的方法

Worker.postMessage():向 Worker 线程发送消息。

Worker.terminate():立即终止 Worker 线程。

使用worker的注意点

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

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

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

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

5.文件限制 Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

实现将worker主线程与子线程代码放在同一个文件中

通常情况下,Worker 载入的是一个单独的 JavaScript 脚本文件,但是也可以载入与主线程在同一个网页的代码。

<script id="worker" type="app/worker"> //*type要指明一个浏览器不认识的类型
        self.onmessage = function (event) { //子线程接收主线程传递数据触发的方法
            var data = event.data; 
            var ans = fibonacci(data); 
            this.postMessage(ans); //向主线程提交请求完成后或处理后的数据
        };
        function fibonacci(n) { //子线程要执行的方法,一般是请求大量数据,这里是一个递归方法
              return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
        }
</script>
<script>
    var blob = new Blob([document.querySelector('#worker').textContent]);// 转码
    var url = window.URL.createObjectURL(blob);  // 编译为url
    var worker = new Worker(url); //因为worker只能请求网络数据.所以需要编译为url
    worker.postMessage(40);//向子线程传数据
    worker.onmessage=function(event){ // 接收子线程传递的数据
        var data=event.data;
        console.log(data) //打印
    };
    worker.onerror=function(event){ // 遇到错误时触发 ,打印错误信息查看
        console.log(event.fileName,event.lineo,event.message);
    };
</script>
复制代码

self代表子线程,即子线程的全局对象,因为在不同的上下文中,也可以使用this指代

上面是一段嵌入网页的脚本,注意必须指定<script>标签的type属性是一个浏览器不认识的值,上例是app/worker,先将嵌入网页的脚本代码,转成一个二进制对象,然后为这个二进制对象生成 URL,再让 Worker 加载这个 URL。这样就做到了,主线程和 Worker 的代码都在同一个网页上面。

参考

MDN

Web Worker 使用教程

文章分类
前端
文章标签