前端之多线程 ---webworker

一、啥是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的更多相关文章
- JS多线程WebWorker
JS多线程WebWorker 一,介绍与需求 1.1,介绍 Web Worker可以为JavaScript创建多线程,且Web Worker 是运行在后台的 JavaScript,独立于其他脚本,不会 ...
- 异步编程Promise/Deferred、多线程WebWorker
长期以来JS都是以单线程的模式运行的,而JS又通常应用在操作用户界面和网络请求这些任务上.操作用户界面时不能进行耗时较长的操作否则会导致界面卡死,而网络请求和动画等就是耗时较长的操作.所以在JS中经常 ...
- 前端黑魔法:webworker动态化,无需JS文件创建worker
前言 前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录 本文的思路和项目代码来源于知友 @simon3000,我加以修饰以更符合理解的需求. 本文所用代码已经 ...
- Javascript 基础夯实 —— 使用 webWorker 实现多线程(转)
原文链接:https://zhuanlan.zhihu.com/p/29219879 当我们开始学习 javascript 的时候,我们就知道 js 其实是单线程的,所以当我们在浏览器中运行某些耗时算 ...
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- HTML5之Javascript多线程
Javascript执行机制 在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setint ...
- 使用Actor模型管理Web Worker多线程
前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...
- HTML5简单入门系列(四)
前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...
- 关于javascript的单线程和异步的一些问题
关于js单线程和异步方面突然就糊涂了,看别人的文章越看越糊涂,感觉这方面是个坑,跳进去就不好跳出来.再去看,看着看着感觉自己明白了一些东西,也不知道对不对,反正是暂时把自己说服了,这样理解能理解的通, ...
- js任务队列EventLoop
JS 执行机制 在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来 ...
随机推荐
- vue-helper 点击跳转插件 在 methods里面互相调用函数,会产生两个函数definitions ,然后就回弹出框让你选择,解决方案是加配置
vue-helper 点击跳转插件 在 methods里面互相调用函数,会产生两个函数definitions ,然后就回弹出框让你选择 原因:换了台电脑,又从新配置下vscode "edit ...
- 摆脱鼠标系列 - vscode - 跳转到下一个文件 Ctrl(右边) + PageDown 这个很常用
为什么 摆脱鼠标系列 - vscode - 跳转到下一个文件 Ctrl(右边) + PageDown 这个很常用 右边Ctrl 就可以单手操控了 这个频率很高
- 使用pymysql库,将tushare股票信息保存入本地MySQL数据库
使用pymysql库,将tushare股票信息保存入本地MySQL数据库 1.前言 由于tushare存在积分权限限制,高频读取tushare数据容易挤占服务器带宽,因此对于常用的tushare数据, ...
- 基于python的PC电脑报警系统
一 基本概念 1.这里实现了电脑的安全报警系统,假如有人不小心动了你的电脑,立即触发报警系统.报警是通过pc机的声卡播放报警信号. 2.该的基础是对python的pyxhook和wave库的合理应用. ...
- day04-实现SpringBoot底层机制
实现SpringBoot底层机制 Tomcat底层启动分析+Spring容器初始化+Tomcat关联Spring容器 1.任务1-创建Tomcat,并启动 (1)创建一个Maven项目,修改pom.x ...
- java项目打包成jar包
参考,欢迎点击原文:https://www.bilibili.com/video/BV16K411H7Tt?from=search&seid=12445640905127816624(B站) ...
- 深入浅出Java多线程(十三):阻塞队列
引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第十三篇内容:阻塞队列.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在多线程编程的世界里,生产者-消费者问 ...
- JavaScript知识总结 终结篇--面向对象,垃圾回收与内存泄漏
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.面向对象 一般使用字面量的形式直接创建对象,但是这种创建方式对于创建大量相似对象的时候,会产生大量的重复代码.但 js和一般的面向对象 ...
- .NET分布式Orleans - 2 - Grain的通信原理与定义
Grain 是 Orleans 框架中的基本单元,代表了应用程序中的一个实体或者一个计算单元. 每个Silo都是一个独立的进程,Silo负责加载.管理和执行Grain实例,并处理来自客户端的请求以及与 ...
- 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第1章
本章勘误: 暂无,等待细心的你告诉我哦. 本章注解: 第7页图1-4下面的第一段:堆栈从一开始就与计算机编程有着内在的联系,这主要是因为子例程的概念 什么是子例程呢? 一般地认为,子例程是某个主程序的 ...