web开发技巧-Worker

最新推荐文章于 2023-07-01 20:27:50 发布

爱吃土豆丝嗯z

最新推荐文章于 2023-07-01 20:27:50 发布

阅读量287

点赞数

分类专栏： web高级开发技巧文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_39503511/article/details/119970896

版权

web高级开发技巧专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Web Workers的基本概念，它允许JavaScript在后台线程中执行任务，以避免阻塞UI主线程。在Chrome浏览器中，每个进程包含多个线程，如请求线程和UI主线程。Worker线程不能直接操作DOM，需通过消息传递与UI主线程交互。示例展示了如何创建和使用Worker进行数据交换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Worker

基本概念

基本概念

Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 URL 为指定的脚本。

Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源（注意：Blink暂时不支持嵌套 Worker）。

1.程序：指可以被CPU执行代码，程序储存在磁盘上
2.进程：将程序调用内存中并且分配指定空间，在内存中的程序称为进程
3.线程：进程内部是有多个线程

chrome浏览器
一个chrome浏览器进程内部至少有6个线程负责向浏览器发送请求数据获取
资源  -- 请求线程
一个线程负责绘制所有资源并且执行js程序 --UI主线程

注意事项：
worker线程执行代码中不能包含任何DOM/BOM元素
操作网页中DOM/BOM只能交给UI主线程
其他线程不能操作DOM/BOM 担心造成渲染混乱

html代码

 <button>111</button>
  <script>
    let w = new Worker('./index.js');
    w.onmessage = function (event) {
      console.log('接收worker数据：' + event.data);
    }
    w.postMessage('123');
  </script>
  <button>222</button>

index.js 代码

var start = new Date().getTime()
do {
  var end = new Date().getTime()
} while (end - start < 2000);
console.log('执行结束');

// 给UI主线程发送数据
postMessage('456');

// 接收UI主线程的数据
onmessage = function(event) {
  console.log('接收UI线程数据：' + event.data);
}