一、啥是worker
JavaScript为单线程,worker则为JavaScript创建多线程环境。
使用场景如:计算文件hash,计算大于1G的文件hash过程是很慢的,但由于要将hash传给后端,所有需要在计算完成以后,再请求后端接口 fast_upload,请求 fast_upload 这个接口也要是同步的,因为若返回false,就需要正常上传文件。所有在同步计算hash,请求接口过程中,会导致页面严重卡顿,这个时候可以使用worker,在主线程之外创建一个线程,去进行这一系列动作,这个过程中,不影响页面其他操作。

二、咋使用worker:
1、主线程创建worker

var worker = new Worker('work.js');
//new一个worker对象,参数是一个脚本文件,该文件必选是网络文件,因为worker不能读取本地文件
2、主线程调用worker.postMessage()方法,向 Worker 发消息。

worker.postMessage('qiao');
worker.postMessage({method: 'echo', args: ['Work']});
3、子线程通过message监听主线程传递的消息

self.addEventListener('message', function(data) {
self.postMessage('Hey'+data);
}, false);

4、主线程接收子线程返回的数据

w.onmessage = function (data) {
console.log(data)
}
5、关闭worker

worker.terminate(); //主线程关闭worker
self.close(); //子线程主动关闭worker
三、Worker 加载脚本
importScripts('/media/js/promise.min.js','/media/js/core.js','/media/js/sha1.js')
四、注意
同源策略
无法进行dom操作
Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

前端之多线程 ---webworker的更多相关文章

  1. JS多线程WebWorker

    JS多线程WebWorker 一,介绍与需求 1.1,介绍 Web Worker可以为JavaScript创建多线程,且Web Worker 是运行在后台的 JavaScript,独立于其他脚本,不会 ...

  2. 异步编程Promise/Deferred、多线程WebWorker

    长期以来JS都是以单线程的模式运行的,而JS又通常应用在操作用户界面和网络请求这些任务上.操作用户界面时不能进行耗时较长的操作否则会导致界面卡死,而网络请求和动画等就是耗时较长的操作.所以在JS中经常 ...

  3. 前端黑魔法:webworker动态化,无需JS文件创建worker

    前言 前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录 本文的思路和项目代码来源于知友 @simon3000,我加以修饰以更符合理解的需求.   本文所用代码已经 ...

  4. Javascript 基础夯实 —— 使用 webWorker 实现多线程(转)

    原文链接:https://zhuanlan.zhihu.com/p/29219879 当我们开始学习 javascript 的时候,我们就知道 js 其实是单线程的,所以当我们在浏览器中运行某些耗时算 ...

  5. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  6. HTML5之Javascript多线程

    Javascript执行机制      在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setint ...

  7. 使用Actor模型管理Web Worker多线程

    前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...

  8. HTML5简单入门系列(四)

    前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...

  9. 关于javascript的单线程和异步的一些问题

    关于js单线程和异步方面突然就糊涂了,看别人的文章越看越糊涂,感觉这方面是个坑,跳进去就不好跳出来.再去看,看着看着感觉自己明白了一些东西,也不知道对不对,反正是暂时把自己说服了,这样理解能理解的通, ...

  10. js任务队列EventLoop

    JS 执行机制 在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来 ...

随机推荐

  1. vscode 翻译插件推荐 Easy Translator,只因为有音标,和位置好

    vscode 翻译插件推荐 Easy Translator,只因为有音标,和位置好

  2. StatefulSet是怎样实现的

    StatefulSet是Kubernetes中用于管理有状态应用的标准实现.与Deployment不同,StatefulSet为每个Pod提供了一个唯一的.稳定的网络标识符,并且Pod的启动和停止顺序 ...

  3. ubuntu中在命令行如何打开图形界面的文件夹的几种方法

    方法一: 使用自带的命令:nautilus . 打开当前文件夹 nautilus . 打开指定路径文件夹 nautilus ddd/ccc/ 方法二:xdg-open xdg-open 命令相当于在 ...

  4. Github账号开启账号双重验证

    原文: Github开启双重验证 - Stars-One的杂货小窝 今天在浏览开源项目的时候,突然Github有个提示我要在9月18日前开启双重验证,说是不完成的话,到时候的Github账号会受到限制 ...

  5. py文件读写

    ''' 1.文件打开 open(文件名,模式) 2.文件关闭filename.close() 模式: 1.r 文件读,指针默认在文件开头 2.w 文件写,指针默认在开头 若有文件,则打开时写入覆盖原文 ...

  6. .Net 8.0 除gRPC之外的另一个选择,IceRPC之快束开始HelloWorld

    作者引言 很高兴啊,我们来到了第一篇,程序员的HelloWorld,快速开始RPC之游 快速入门 演示如何在几分钟内,使用IceRPC,构建和运行一个完整的客户端-服务器(C/S)应用程序. 必要条件 ...

  7. 用Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.组件设计 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式 现在有一个场景,点击新增与编辑都弹框出来进行 ...

  8. 记录--你可能忽略的10种JavaScript快乐写法

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 代码的简洁.美感.可读性等等也许不影响程序的执行,但是却对人(开发者)的影响非常之大,甚至可以说是影响开发者幸福感的重要因素之一: ...

  9. [HTML、CSS]知识点

    [版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/130176402 出自[进步* ...

  10. 这里有你不得不了解的Java 11版本特性说明

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...