webworker

最新推荐文章于 2024-01-13 09:00:00 发布

jasonjkj

最新推荐文章于 2024-01-13 09:00:00 发布

阅读量320

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/jasonjkj/article/details/108024393

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.webworker 是什么 ?

回顾一下JS的一些特性

js 是单线程的
js 是异步的(非阻塞)
js 是事件驱动的

js的多线程

笔记本 核心 线程 虚拟线程,一堆堆牛逼的配置,js要还是单线程,看着有点可惜   
就像鞋帮和鞋底子,鞋底子特别好, 穿了两天鞋帮子坏了,可惜不
那么牛逼的硬件,当然 要用起来了,于是 JS 的多线程来了 ...

什么时候用呢

我最近用它,是因为后端得瑟了, 不做搜索,不分组,不给排序,不组织父子关系,还特么不分页(没脾气,干就完了)
- 组织千条数据的父子关系,遍历卡死,还得优化(优化个屁)
- 逻辑同步的,页面体验不好
- 浏览器老是无情的嘲讽 “呦呦呦页面崩溃了呦”
查资料的时候,了解到可以把轮询啥的请求写在里面(建议用fetch)
上传大文件(个异步的东西是不是没必要)

总结一下:当你页面因为计算,读取卡的时候,你自然就知道什么时候用了 (千条数据渲染卡,不好使,webWorker本生就不能操作Dom)

调查兼容性(直接上链接)

MDN关于Worker的文档
 阮一峰的博客

webworker多线程原理

基础操作

workerView.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var worker = new Worker('worker.js', { name : 'worker' });
    worker.postMessage("你好 Worker线程");

    worker.onmessage=function (e) {
        console.log(e.data);
    }
    //主线程关闭线程
    worker.terminate();

</script>

</body>
</html>

worker.js

importScripts("./other.js")
self.onmessage = function (e) {
    console.log(e.data);
};
self.postMessage("你好 主线程")

others.js

console.log("otherJS引入入成功");

总结: API 关闭线程先不用看,websocket , http 之类一样, 不过是交换信息罢了
请求后端, 在前端角度来看 , 不也可以看成后端是另一个线程(别杠,就这么一说), 给你做计算, 再把数据返回给你

有几个问题,要注意一下

Worker 不能读取本地文件就是file协议, 现在脚手架都是由服务的不用管
关于传参数,通信数据会被串行化 , 就是说另一个线程,就会开辟另一个内存地址 ,没法和主线程地址公用(这就是你不能传递函数作为参数的理由?)
worker文件, 一般是一个单独的文件(这应该也和内存空间有关系) , 也可以使用Blob URL(也相当于是一个独立的文件了)
文件引入有特殊的APIimportScripts)
API 可以看MDN的手册
线程不能自己关闭, 千万记得关线程(线程自己可以关,主线程也可以关)
摘一段大神代码:

function createWorker(f) {
  var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

开动,放到项目里面

想要放到Vue项目里,查查资料,一大堆配置(烦) ,很多原因是webpack编译worker造成的问题
我能不能,使用Blob URL实现啊(不想写)
有没有现成的轮子啊,省的我配置了,于是找到了她 vue-worker
vue-worker还有其他用法,更贴近原生wenworker,需要的话看手册

npm install vue-worker --save

//引入
import Vue from 'vue'
import VueWorker from 'vue-worker'
Vue.use(VueWorker)

//基础使用 
this.$worker.run((arg1, arg2) => { 
   //你的计算逻辑  
   return  res
}, [参数1,参数1])
.then((res)=>{
   
})
.catch(err=>{
   
})