webwork html引入,WebWork（在主线程创建子进程）

WebWork浅谈

前言：

都知道JS是单线程语言，最让人头疼的莫过于在网络正常的情况下经常出现页面的假死，

以及在进行大量的for循环计算时会导致线程阻塞,由于要进行大量的计算JS后面的运行会被阻隔在此处，使得性能较差，代码维护性差等一系列的问题发生。

本人也看了很多关于webwork的demo和官方的讲解，都说是官方很多都不是很容易读懂，在最近几天的学习过程我也针对这个做了些功课发现了webwork的作用非同一般！

先上代码：

let worker = new Worker("work.js")//此处写待处理的地址

let data = [1, 2, 3, 4, 5, 6, 7]

worker.postMessage(data);

worker.onmessage = function(event) {

console.log(event.data)

document.querySelector("ul").innerHTML = event.data

}

//此部分是work.js中

this.addEventListener("message", (data) => {

let str = render(data.data)

this.postMessage(str)

})

function render(data) {

let str = ''

data.forEach(i => {

str += `

${i}`

});

return str

}

正如您所看到的，这就是一个简单的Demo：

但是你在之后再补一句简单的console.log(1)就能够看出结果了，

打开F12(传说中的开发者模式)你会惊奇的发现单线程语言居然先输出了1然后在UL中添加了节点，

思考？

照以前的写法我们肯定会这样做：

let str = "";

data.forEach(i => {

str += `

${i}`

});

document.querySelector("ul").innerHTML = str;

是不是发现了其中的好处？

简单来说我们把一套本该同步的代码该成了异步，也就是在主线程中开辟了一条子线程，这样的好处就是不会影响主线程，线程任务的执行，具体步骤在子线程中进行，最后返回结果给主线程中，很巧妙的解决了之前上文提到的，假如在主线程中我有个任务循环了10000次(当然是开玩笑！)这时webwork是不是很巧妙的处理了这个问题呢？

结尾：

为什么要这么做？

随着web的发展，时代越来越讲究优化二字，能够用更加优雅的代码，更加简洁的代码去完成任务是至关重要的。

用户需求一直是我们开发者比较密切关心的问题，试想一下如果在某一天有个用户访问了你的网站由于你代码的到至了页面的假死的现象的发生那是一件多么可怕的事情，在深层次的探究中，每一个优秀的前端工作者都应该去努力解决这些问题。

作者寄语：刘某人，写文章不多，不喜勿喷，只是发表个人见解，如果有更好的建议希望可以互相帮助，相互学习

webwork html引入,WebWork（在主线程创建子进程）相关推荐

WebWork（在主线程创建子进程）
WebWork浅谈前言: 都知道JS是单线程语言,最让人头疼的莫过于在网络正常的情况下经常出现页面的假死, 以及在进行大量的for循环计算时会导致线程阻塞,由于要进行大量的计算JS后面的运行会被阻隔 ...
【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | 主线程创建 Activity 实例之前使用插件 Activity 类替换占位的组件 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
c#子线程和主线程创建窗体时顶层显示的区别
主线程 1.设置TopLevel,Topmost,bringfront属性. 子线程 2.在可在Load事件里注册循环设置TopLevel,Topmost,bringTofront属性的方法,如下 f ...
在非主线程中创建窗口
很多朋友都会有过这样的经历,为什么在主线程中创建窗口且窗口工作很正常,但一移到非主线程(有的朋友喜欢叫它为工作线程),却无法正常工作.本文就这个问题和各位探讨,可能无法做到尽善尽美,但能抛砖引玉也算是 ...
主线程异常会导致 JVM 退出？
大家好,我是坤哥上周线程崩溃为什么不会导致 JVM 崩溃在其他平台发出后,有一位小伙伴留言说有个地方不严谨他认为如果 JVM 中的主线程异常没有被捕获,JVM 还是会崩溃,那么这个说法是否正确呢, ...
Android主线程阻塞处理及优化
一.前期基础知识储备当一个应用程序启动之后,android系统会为这个应用程序创建一个主线程(Main Thread),它负责渲染视图,分发事件到响应监听器并执行,对界面进行轮询的监听.因此,一般也 ...
多线程，主线程与子线程的通信Handler Message sendmessage与handlemessage obtainmessage
android是单线程的,在子线程中是不能修改UI线程的任何操作,所以要用一种方式让子线程中的信息返回到主线程中再做修改.这就要让主线程与子线程通信. 那如何让它们之间进行通信呢?我们用Handler ...
android handler 主线程吗,[android开发]非主线程进行handler操作
[android开发]非主线程进行handler操作 (2012-10-30 16:26:01) 标签: 杂谈 android默认对主线程创建有消息队列及looper(looper是对消息队列的操作类 ...
MFC子线程访问主线程对话框程序的控件对象
最近在使用 VC 开发软件时需要用到多线程同步来解决开发过程中遇到的问题.本来以为只要象控制台程序一样,在主线程创建子线程,并设置好相应的对象事件就能解决问题,但是等到真正做起来,才在实践中发现原来事 ...

webwork html引入,WebWork（在主线程创建子进程）

webwork html引入,WebWork（在主线程创建子进程）相关推荐

最新文章

热门文章