JavaScript异步编程之Web Workers的多线程机制

最新推荐文章于 2024-01-27 12:11:59 发布

泡泡Pro Max

最新推荐文章于 2024-01-27 12:11:59 发布

阅读量192

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44017013/article/details/115758593

版权

一.Web Workers的介绍

Web Workers的介绍

Web Workers
	一个Web API -> 浏览器能力 -> 提供一个js运行的环境
	Web应用程序可以独立于主线程的后台线程中，运行一个脚本操作
	关键点：性能考虑

Worker线程与主线程之间的通信过程
实例

// worker.js
function fibonacci(n){
   if(n == 1 || n == 2){
   	return 1;
   }
   return fibonacci(n - 2) + fibonacci(n - 1);
}
postMessage(fibonacci(40));
onmessage = function (e) {
   console.log(e);
}

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

worker.onmessage = function (e) {
  console.log("worker通知的message",e);
  worker.postMessage("message收到了");
};

// webworker.html
<!doctype html>
<html>

<head>
   <title>web workers example</title>
</head>

<body>
   <script src='./webworker.js'></script>
</body>

</html>

注意：无法直接在本地运行，因为new worker(x)里面的参数是无法通过本地取到的。
建议：使用vscode中的Live Server或者使用browser -sync start -s

worker的能力是受限的

1.与主线程脚本同源
2.与主线程上下文不同
 	影响：无法操作DOM、不能执行alert等
3.不能读取本地文件

window对象和worker全局对象的对比

在这里插入图片描述

嵌入式worker

<script id="worer" type="javascript/worker">
     function fibonacci(n){
         if(n == 1 || n == 2){
             return 1;
         }
         return fibonacci(n - 2) + fibonacci(n - 1);
      }
      postMessage(fibonacci(40));
 </script>
 <script>
     var workerScript = document.querySelector('#worker').textContent;
     var blob = new Blob([workerScript], { type: 'text/javascript' });
     var worker = new Worker(window.URL.createObjectURL(blob));
     worker.onmessage = function (e) {
         console.log("worker通知的message", e);
         worker.postMessage("message收到了");
     }
 </script>

Blob对象用法 
链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
JavaScript中的Blob对象 
链接：https://juejin.im/entry/5937c98eac502e0068cf31ae

上面的实例代码，写法不够优雅。
推荐：使用webworkify.js，它是嵌入式worker的封装

##二. Web Workers场景

解决的痛点是什么
	Js执行复杂运算时候阻塞了页面渲染
使用场景
	复杂运算
	渲染优化
	流媒体数据处理

哪些项目用到了web worker

在这里插入图片描述

flv.js

flv.js是哔哩哔哩开源的音视频模块，里面是使用了web worker

泡泡Pro Max

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript异步编程之Web Workers的多线程机制

一.Web Workers的介绍Web Workers的介绍Web Workers 一个Web API -> 浏览器能力 -> 提供一个js运行的环境 Web应用程序可以独立于主线程的后台线程中，运行一个脚本操作关键点：性能考虑Worker线程与主线程之间的通信过程实例// worker.jsfunction fibonacci(n){ if(n == 1 || n == 2){ return 1; } return fibonacci(
复制链接

扫一扫