在单页应用中使用WebWork

JS为了避免DOM渲染冲突，使用单线程运行代码。虽然浏览器通过事件循环队列延后处理耗时任务，但是在执行大量复杂运算时依然会使主线程卡顿，HTML5提出了WebWork允许用户另开线程来进行复杂的逻辑计算处理。

WebWork在html中使用方法：

1. 在index.Html中新建worker对象，并发送及监听消息

    <!DOCTYPE html><html lang="en"><head><title>WebWork</title></head><body> </body><script>var work = new Worker('./work.js')work.postMessage(1000000000)work.onmessage = function(res){console.log("累加结果 : ",res.data)}</script></html>

2. 新建work.js处理复杂逻辑

    onmessage = function(e){let sum = 0,num = e.data;for(var i=1;i<=num;i++){sum += i}postMessage(sum);}

如果通过浏览器直接打开本地index.html会报错：Failed to construct ‘Worker’: Script at ‘XXXX’ cannot be accessed from origin ‘null’.
可以通过http-server 搭建http服务后正常运行

React等单页应用中的使用方法：

在React，Vue等单页应用中Webpack将js代码都打包成一个js文件，故以上通过new Worker(’./work.js’)方式新建worker将会报访问不到worker.js的错误。

*方案 1. 将worker.js放入public等可以直接http访问的静态资源文件夹下面，注意是不支持跨域访问的。

*方案 2. 使用第三方插件例如react-webworker，npm地址：点击这里

*方案 3 (推荐). 利用Blob新建本地临时文件，通过URL.createObjectURL()创建对blob对象的URL引用，这些URL只能在浏览器的单个实例中和同一个会话中使用。

1. 封装worker.js

export default class WebWorker {constructor(worker) {const code = worker.toString();const blob = new Blob(["(" + code + ")()"]);return new Worker(URL.createObjectURL(blob));}
}

2. 在React中和Vue中使用相似，以react为例：

    import WebWorker from './worker.js'...componentDidMount(){let work = function(){self.onmessage = function(e){let sum = 0,num = e.data;for(var i=1;i<=num;i++){sum += i}postMessage(sum);}}this.worker = new WebWorker(work)this.worker.onmessage = function(res){console.log("累加结果 : ",res.data)}}someEvent(){this.worker.postMessage(1000000000)}

WebWork新开线程存在以下问题：1. work中不能访问及操作dom, 2. 新开WebWork线程会有一定的系统开销

有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

邮件：594341275@qq.com
QQ：594341275
博客： @蓝色札记

在单页应用中使用WebWork相关推荐

vue单页项目中判断有没有上一页
场景:判断一个页面有没有上一页,没有就关闭页面,有的话就返回上一页测试了多种方法后,最后用window.sesstionStorage 结合router.afterEach实现了. 我解决的思路: ...
在vue单页应用中使用jquery
记录一个今天用到的vue-cli建立的应用中引入jquery的方式. 首选通过npm安装jquery npm install jquery --save 在build/webpack.base.con ...
在vue单页应用中使用jquery 1
记录一个今天用到的vue-cli建立的应用中引入jquery的方式. 首选通过npm安装jquery npm install jquery --save 复制代码在build/webpack.bas ...
【单页应用】全局控制器app应该干些什么？
前言之前,我们形成了页面片相关的mvc结构,但是该结构还仅适用于view(页面)级,那么真正的全局控制器app应该干些什么事情呢?我觉得至少需要干这些: 功能点 ① 提供URL解析机制,以便让控制器 ...
移动Web单页应用开发实践——页面结构化
1. 前言在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
[译]用AngularJS构建大型ASP.NET单页应用（二）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...
ajax div 赋值重新渲染_优化向：单页应用多路由预渲染指南
前言 Ajax 技术的出现,让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容,这就是单页应用.在一个单页应用中,往往只有一个 html 文件,然后根据访问的 url 来匹配对应的路由脚本, ...
404 单页应用报错路由_通过 Laravel 创建一个 Vue 单页面应用（五）
文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t/34858 我们在第4部分完成了编辑用户的功能,并且学习了如何使用 v-model 来监 ...
404 单页应用报错路由_单页应用
作者:TYANer 单页应用对于大家而言,可能是一个比较陌生的概念,但是其实大家都和单页应用打过交道.之所以这么说,是因为目前平台开发的所有中台系统的前端部分,包括Kadmin.TGS.OTA都属于单 ...

在单页应用中使用WebWork

在单页应用中使用WebWork

WebWork在html中使用方法：

React等单页应用中的使用方法：

WebWork新开线程存在以下问题：1. work中不能访问及操作dom, 2. 新开WebWork线程会有一定的系统开销

在单页应用中使用WebWork相关推荐

最新文章

热门文章