JS Worker多线程

1. 原生JS多线程

页面运行worker，限制了worker.js需要与页面同源。本地js代码可以借助URL.createObjectURL和Data URL的方式规避

1.1 URL.createObjectURL

vue-worker等库一般借助于URL.createObjectURL创建本地js文件的方式规避同源限制.

<script>// 1.定义多线程实际运行的函数function threadFn(a, b, c) {// 可以传递初始化参数，但参数应尽量通过onmessage传递console.log('Worker Thread | receive initial args:', a, b, c)// worker进程内通过self调用context方法，不能使用thisself.onmessage = (e) => {console.log('Worker Thread | onmessage:', e.data)console.log('Worker Thread | postMessage:', e.data)self.postMessage(e.data)}}// 2.定义worker创建方法：传入多线程运行函数和初始参数，创建workerfunction createWorker(fn, ...params) {// 将多线程函数转字符串const fnStr = `(${fn.toString()})(${[...params]})`console.warn('Main Thread | thread function string:', fnStr)// worker必须使用页面同源的js，此处借助URL.createObjectURL转换const blob = new Blob([fnStr])const url = URL.createObjectURL(blob)// 优化：URL.createObjectURL创建的资源必须手动通过URL.revokeObjectURL释放，否则需要刷新Browser Context时才会被释放const worker = new Worker(url)return worker}// 3.实例化workerconst c = "'c'" // 线程创建传递初始化参数。注意，字符串常量需要两重引号包裹，否则函数转字符串会解析异常。建议通过postMessage传递数据let worker = createWorker(threadFn, "'aaa'", c, 111)// 4.定义外层worker数据首发worker.onmessage = e => {console.warn('Main Thread | onmessage:', e.data)if (e.data === 'terminate') {terminate()}}// 5.向worker发送数据console.warn('Main Thread | postMessage:', 'main')worker.postMessage('main')// 6.注销workerfunction terminate() {worker.terminate()worker = nullconsole.warn('Main Thread | worker has been terminated')}setTimeout((() => {console.warn('Main Thread | postMessage:', 'terminate')worker.postMessage('terminate')}), 1000)
</script>

1.2 Data URL

除了URL.createObjectURL外，还可以通过Data URL实现。通过Data URL运行的js函数不能省略语句的分号

function threadFn () {console.log('worker | init thread');self.postMessage('create success');
}function createWorker(fn) {const worker = new Worker(`data:,(${fn.toString()})()`)return worker
}const worker = createWorker(threadFn)
worker.onmessage = e => {console.log('main | onmessage', e.data)
}

2. Vue多线程

<template><div>Worker</div>
</template><script>
import Vue from 'vue'
import worker from 'vue-worker'Vue.use(worker)function test(a, b) {return a + b
}export default {created() {this.init()},methods: {init() {this.runWorker()this.createWorker()},runWorker() {let worker = this.$worker.run(test, [1, 2])worker.then(res => {console.log(`this.$worker`, res)})worker = null // destroy worker},createWorker() {const actions = [{ message: 'f1', func: a => a++ },{ message: 'f2', func: (a, b) => a + b }]let workerList = this.$worker.create(actions)workerList.postMessage('f1', [99]).then(res => console.log('f1', res))workerList.postMessage('f2', [99, 101]).then(res => console.log('f2', res))workerList = null // destroy worker},}
}
</script>

JS Worker多线程相关推荐

javascript worker 多线程简单示例
javascript worker 多线程简单示例项目结构主线程 index.html <!DOCTYPE html> <html lang="en"> ...
HTML5 API详解（8）:worker多线程教你如何避免页面卡死
web worker是html5 提供的一个JavaScript多线程的解决方案,worker用于处理一些大量复杂耗时的计算,免得页面冻结.挂起.卡死. 比如:我们要运算一个复杂的数学计算:递归计算. ...
[译]深入理解 Node.js Worker Threads
最近工作中又有可能需要写 Node.js 应用了,距离上次写 Node.js 应用也有好些年了,所以就开始重新熟悉下 Node.js 了.刚好最近又在学 Go,其最大的特点就是简单.轻量级的并发模型. ...
JS实现多线程--Concurrent.Thread.js
JS实现多线程--Concurrent.Thread.js 前言 Concurrent.Thread.js 前言 js是单线程语言,但前端的某些任务是非常耗时的,如果让它们老老实实的排队等待执行的话, ...
js worker 个人使用教程
worker来源总说周知,js是一门单线程的语言,简单的来说,可以吧线程想象浏览器背后的小人,这个小人可不得了,专门干的活就是运行js代码,如果条件允许,它可以整天整夜24小时不停的转,比那些什么9 ...
最小公倍数HTML,HTML5 Web Worker多线程编程实例 -- 计算最小公倍数和最大共约数
注释详细,不多解释!请看代码!!! 简单交互页面 index.html Web worker 最小公倍数和最大共约数 body { font-family: "微软雅黑"; fon ...
javaScript 多线程并行编程施工中~
关键词:javascript 单线程本质,html5,worker,nodejs 封面P站画师ID:12191398 查看全文 http://www.taodudu.cc/news/show-4981 ...
【worker】js中的多线程
因为下个项目中要用到一些倒计时的功能,所以就提前准备了一下,省的到时候出现一下界面不友好和一些其他的事情.正好趁着这个机会也加深一下html5中的多线程worker的用法和理解. Worker简介 J ...
js多线程的实现：worker
JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的.像setTimeout.ajax的异步请求,或者是dom元素的一些事件,都是在JS主线程执行的.这些操作并没有在浏览器中开辟新的线 ...

JS Worker多线程

1. 原生JS多线程

1.1 URL.createObjectURL

1.2 Data URL

2. Vue多线程

JS Worker多线程相关推荐

最新文章

热门文章