webwork的定义

webwork为单页面使用多线程，不影响页面的渲染，充分补全的js单线程阻塞页面渲染的缺点，项目中使用还是很受欢迎的

webwork的封装

webwork在单页面中使用会遇到打包找不到webwork.js文件的提示，此时需要安装worker-loader插件，配置config, 而webwork的封装避免了在项目线上打包需要安装worker-loader问题,单独使用一个js文件，下面会说怎么使用
vue和react使用类似，此处以vue为例

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

组件内使用

请求到数据后正常赋值，渲染页面，在最后运行webwork另起线程

组件内使用

1，请求数据的方法

getData() {let params = {}this.request(params).then(res => {this.form = Object.assign({}, res.data)this.logLines = getLines(this.form.log.segment1) // 根据换行符把内容切割成数组this.form.log = this.logLines.splice(-LOG_PAGE_SIZE, LOG_PAGE_SIZE).join('\n')this.cmOption.firstLineNumber = Math.max(this.logLines.length + 1, 1)this.$nextTick(() => {const Dom = this.$refs.codemirror.codemirrorDom.scrollIntoView({line: Dom.lineCount() - 1,ch: 0})})this.runWebWork(res.data)})},

2，new一个实例

 // 另起webwork线程runWebWork(data) {let workFunction = function() {this.onmessage = e => {let arr = e.data.split(/\r\n|[\r\n]/)postMessage(arr)}}if (work) {work.terminate()}console.time()work = new WebWorker(workFunction)// 发送消息work.postMessage(data.log.segment2)// 接收消息work.onmessage = e => {console.log('webwork执行完成')this.logLines = [...e.data, ...this.logLines]// Worker 线程work = nullconsole.timeEnd()}// 监听清除workthis.$once('hook:beforeDestroy', () =>{work.terminate()work = null})}

这样一个简单的webwork就ok了

单页面vue使用webwork相关推荐

如何单页面Vue应用转化成多页面的Vue应用
准备工作在本地用vue-cli新建一个项目,这个步骤vue的官网上有,我就不再说了. 这里有一个地方需要改一下,在执行npm install命令之前,在package.json里添加一个依赖,后面会 ...
php+Vue单页面学生管理系统
Php学生管理系统引言:学生实训,老师要求用php代码写学生管理系统作为实训内容.之前作业都是拜托同学交,此次作业是自由发挥的,故从星期天学习Php的基本语法.如字符串拼接,function的写法, ...
[项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）
前言某天张三对小花说,我需要在一台新电脑上实现一个前端的漂亮页面:比如京东手机首页(m.jd.com). 小花这时吭哧吭哧的去新电脑上安装nodejs.npm,然后在本地使用npm构建vue3项目, ...
app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏项目第一次上线正常项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
Nginx 解决WebApi跨域二次请求以及Vue单页面问题
Nginx 解决WebApi跨域二次请求以及Vue单页面问题参考文章: (1)Nginx 解决WebApi跨域二次请求以及Vue单页面问题 (2)https://www.cnblogs.com/ji ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
Vue单页面在ios10系统上出现白屏的bug
一个bug 你用Vue做了一个单页面应用,它在一切设备上都工作正常,但是突然有一天,你的测试和你说,这个网站在iOS 10上跑不起来,怎么办?于是你打开你电脑上的Chrome浏览器,工作正常:打开Sa ...

单页面vue使用webwork

webwork的定义

webwork的封装

组件内使用

组件内使用

单页面vue使用webwork相关推荐

最新文章

热门文章