Worker

我们知道JavaScript是一门单线程的语言,那么如果我们有一些计算特别耗时,想要放到另外一个线程去做,worker应运而生
worker就是一个独立于JavaScript线程之外的另外一个线程,可能理解为JavaScript实现多线程的方式

worker的使用

  1. 第一步判断浏览器是否支持worker,typeof (Worker) !== “undefined”
  2. 通过new Worker()构造方法创建一个worker线程,返回一个实例用于发送和接收数据
  3. onmessage() 方法监听worker线程发送的数据
  4. postMessage() 方法发送数据

worker的用法我们通过下面的代码来理解:

worker.html

<!DOCTYPE html>
<html><body><p>点击Start Worker按钮启动web worker,可以看到web worker开始工作,且在web worker正常工作时,我们仍然可以在input输入框中输入信息,这表示页面并没有因为webworker的运行而被阻塞:</p><p>计数: <output id="result"></output></p><button onclick="startWorker()">Start Worker</button><button onclick="stopWorker()">Stop Worker</button><input type="text" value="" /><script>var w;function startWorker() {//判断浏览器是否支持workerif (typeof (Worker) !== "undefined") {if (typeof (w) === "undefined") {w = new Worker("./worker.js");}w.onmessage = function (event) {document.getElementById("result").innerHTML = event.data;};} else {document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";}}function stopWorker() {w.terminate();}</script>
</body></html>

worker.js

function timedCount() {for (var i = 0; i < 10000000000; i++) {if (i % 100000 === 0) {postMessage(i);}}
}timedCount();

一分钟搞懂WebWorker相关推荐

  1. mysql decimal型转化为float_5分钟搞懂MySQL数据类型之数值型DECIMAL类型

    速成指南 5分钟搞懂MySQL数据类型 之数值型--DECIMAL类型 DECIMAL类型的语法:DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL].其中M指定的是数字的总位 ...

  2. 一分钟搞懂 微调(fine-tuning)和prompt

    一分钟搞懂 微调fine-tuning和prompt 区别与联系 区别 联系 优缺点 微调的优点 微调的缺点 prompt的优点 prompt的缺点 在CV领域 Reference 大家都是希望让预训 ...

  3. html网页和cgi程序编程,十分钟搞懂什么是CGI

    原文:CGI Made Really Easy,在翻译的过程中,我增加了一些我在学习过程中找到的更合适的资料,和自己的一些理解.不能算是严格的翻译文章,应该算是我的看这篇文章的过程的随笔吧. CGI真 ...

  4. python数据分析建模-十分钟搞懂“Python数据分析”

    原标题:十分钟搞懂"Python数据分析" 引言:本文重点是用十分钟的时间帮读者建立Python数据分析的逻辑框架.其次,讲解"如何通过Python 函数或代码和统计学知 ...

  5. 场内场外交易成本_2分钟搞懂场内场外基金

    一天一个金融知识,是成为投资大神的必要条件.今天我们花2分钟搞懂场内基金和场外基金.基金,既可以场内买又可以场外申购,场内场外这两者有什么区别?场内 场外 场内场外的"场",一般指 ...

  6. 看聊天记录都学不会C语言?太菜了吧》(17)5分钟搞懂指针与多重指针

    若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新 ...

  7. 5分钟搞懂用户态,内核态

    5分钟搞懂用户态,内核态 1. 什么是用户态,内核态 用户态就是提供应用程序运行的空间,为了使应用程序访问到内核管理的资源例如CPU,内存,I/O.内核必须提供一组通用的访问接口,这些接口就叫系统调用 ...

  8. 一分钟搞懂JavaME、JavaSE和JavaEE的区别

    一分钟搞懂JavaME.JavaSE和JavaEE的区别 JavaME微缩版 JavaSE标准版 JavaEE企业版 多数编程语言都有预选编译好的类库以支持各种特定的功能,在Java中,类库以包(pa ...

  9. 五分钟搞懂什么是红黑树

    五分钟搞懂什么是红黑树(全程图解) 18-09-04 星925 + 关注 献花(2)  收藏 前戏 红黑树,对很多童鞋来说,是既熟悉又陌生.熟悉是因为在校学习期间,准备面试时,这是重点.然后经过多年的 ...

最新文章

  1. 图解Redis之数据结构篇——压缩列表
  2. 静电场的有限差分法与matlab 仿真课程设计,计算物理和MATLAB课程设计--自激振动系统的MATLAB仿真.doc...
  3. 从程序设计角度看B/S C/S到底有什么不同???
  4. jquery validate验证方法
  5. 关于epoll中的read函数说明
  6. c#如何跳出一个函数_C#初学者教程系列9:类和对象
  7. 前端学习(2096):作业得回顾和完成
  8. Iptables Nat转发
  9. 【语音合成】基于matlab比例重叠相加法信号分帧与还原【含Matlab源码 561期】
  10. Linux实战教学笔记
  11. 防止被偷窥和修改 Office文档保护秘笈
  12. python open file失败_python open打开文件失败原因及解决办法
  13. 2020 11月8周记
  14. 时域反射仪(TDR)介绍
  15. 大学四年的生活规划——做一个清醒的奋斗者
  16. 小红书笔记下沉的方法和技巧
  17. 关于如何使用原生实现表格固定列,纯 CSS 实现
  18. 手机电脑卖不动,AR\VR和自动驾驶也不给力;苹果的未来在哪里?
  19. 【案例】携手捷普 :让流程立于云端,臻于至善
  20. 何海涛算法面试题感悟之三:子数组…

热门文章

  1. Java(基础)单例(Singleton)
  2. java string 最大长度是多少_字符串String的最大长度
  3. C#HttpHelper爬虫类源码分享--苏飞版
  4. 怀孕需要改变什么——护肤品和洗面奶
  5. 【新书推荐】航空维修技术手册——机体(第一卷)
  6. python 实现漂亮的烟花,樱花,玫瑰花
  7. 矩阵论(3)——子空间
  8. MSYS2 换中科大的源
  9. UDP 发送 MediaPlayer播放
  10. 内部类详解(很详细)