什么是Web Worker

　　web worker 是运行在后台的 JavaScript，不会影响页面的性能。

　　当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

怎么用

HTML页面代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Web Worker</title>
  6. </head>
  7. <body>
  8. <p>计数：<output id="result"></output></p>
  9. <button onclick="startWorker()">开始计数</button>
  10. <button onclick="endWorker()">结束计数</button>
  11. <script>
  12.     var w;  // 此时的w是undefined
  13.  
  14.     function startWorker() {
  15.         // 判断当前浏览器是否支持Worker
  16.         if(window.Worker){
  17.             // 判断是否有w
  18.             if(typeof(w) == 'undefined'){
  19.                 // 创建一个新的Worker对象，他会去执行demoWorkers.js这个文件下的JS代码
  20.                 w = new Worker('demoWorkers.js');
  21.             }
  22.             // 给Worker添加一个事件监听器，Worker子线程返回消息时被调用，返回的数据在data里
  23.             w.onmessage = function (event) {
  24.                 console.log(event);
  25.                 console.log(event.data);
  26.                 document.getElementById('result').innerHTML = event.data;
  27.             }
  28.         }else{
  29.             // 浏览器不支持Worker要做的事
  30.             document.getElementById('result').innerHTML = '不支持Web Worker'
  31.         }
  32.     }
  33.     function endWorker() {
  34.         // 终止 web worker，并释放浏览器/计算机资源
  35.         w.terminate();
  36.         w = undefined;
  37.     }
  38. </script>
  39.  
  40. </body>
  41. </html>

子线程demoWorkers.js代码

  1. var i = 0;
  2. function timeCount() {
  3.     i = i+1;
  4.     // postMessage()方法-它用于向HTML页面传回一段消息
  5.     postMessage(i);
  6.     setTimeout('timeCount()', 500)
  7. }
  8.  
  9. timeCount();

效率对比

没有使用WebWorker：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <p>100000000以内累加总和为：<output id="result"></output></p>
  10. <button onclick="startSum()">开始计算</button>
  11.  
  12. <script>
  13.     function startSum() {
  14.         console.time('1');
  15.         var sum = 0;
  16.         for(var i = 0;i<100000000;i++){
  17.             sum += i
  18.         }
  19.         document.getElementById('result').innerHTML=sum;
  20.         console.timeEnd('1');
  21.     }
  22. </script>
  23.  
  24. </body>
  25. </html>

然后是耗时如下：

使用Web Worker：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <p>100000000以内累加总和为：<output id="result"></output></p>
  10. <button onclick="startSum()">开始计算</button>
  11. <script>
  12.  
  13. // Web Worker
  14.     function startSum() {
  15.         console.time('1');
  16.         var w;
  17.         if(window.Worker){
  18.             if(typeof(w) == 'undefined'){
  19.                 w = new Worker('sumWorker.js')
  20.             }
  21.             w.onmessage = function (event) {
  22.                 document.getElementById('result').innerHTML = event.data;
  23.             };
  24.             console.timeEnd('1');
  25.         }else{
  26.             document.getElementById('result').innerHTML = '该浏览器不支持Web Worker'
  27.         }
  28.     }
  29. </script>
  30.  
  31. </body>
  32. </html>

sumWorker.js

  1. var sum = 0;
  2. for(var i = 0;i<100000000;i++){
  3.     sum += i
  4. }
  5. postMessage(sum);

耗时如下：

JS多线程之Web Worker的更多相关文章

  1. JS利用HTML5的Web Worker实现多线程

    需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面 var number = 55;//传入分线程的参数 var worker = ne ...

  2. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  3. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  4. Web Worker

    写在前面 众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况 ...

  5. HTML5新增的一些属性和功能之八——web Worker

    Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...

  6. Web Worker无阻塞UI的牛逼技术，html5，可惜无法敢于UI

    众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕 ...

  7. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  8. web Worker使js实现‘多线程’？

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  9. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

随机推荐

  1. orleans 的一种模式

    为了避免过热的grain,按时间%cpu数,分派任务到grain中,然后有限制的去访问原来过热的grain.eg:tokengrain,1个半小时后,更新所有的grain.

  2. package ‘RPMM’ is not available (for R version 3.6.0)

    当我们用启动R安装一些R包的时候 提示: Warning: unable to access index for repository https://mirrors.eliteu.cn/CRAN/s ...

  3. NLP | 算法 学习资料整理

    UPDATE TIME: 2019-12-12 17:06:32 NLP: 对话系统: [ ] https://www.cnblogs.com/jiangxinyang/p/10789512.html ...

  4. iOS 13 DeviceToken获取发生变化

    问题描述: iOS 13 通过[deviceToken description]获取到的内容已经变了,这段代码运行在 iOS 13 上已经无法获取到准确的DeviceToken字符串了, NSStri ...

  5. linux下查看进程的状态 /proc/[pid]/status

    查看进程的状态: 1.查看进程的pid,以java为例:ps -ef | grep java 2.查看进程状态:cat /proc/[pid]/status 关键字: linux [root@loca ...

  6. PHP-FPM配置与调优

    PHP-FPM是啥? PHP-FPM是一个PHP FastCGI的管理器,它实际上就是PHP源代码的补丁,旨在将FastCGI进程管理引进到PHP软件包中. CGI是啥? CGI全称"公共网 ...

  7. [转帖]我最近研究了hive的相关技术，有点心得，这里和大家分享下。

    我最近研究了hive的相关技术,有点心得,这里和大家分享下. https://www.cnblogs.com/sharpxiajun/archive/2013/06/02/3114180.html 首 ...

  8. springMVC设置不拦截静态资源的方法

    SpringMVC提供<mvc:resources>来设置静态资源,但是增加该设置如果采用通配符的方式增加拦截器的话仍然会被拦截器拦截,可采用如下方案进行解决: 方案一.拦截器中增加针对静 ...

  9. 元组的简单介绍——参考Python编程从入门到实践

    元组 用于存储一系列不可修改的元素 1. 元组的定义 dimensions = (200, 50) # 定义一个元组,即将元素用圆括号括起来 print(dimensions[0]) # 打印元组中的 ...

  10. 通过 Kubeadm 安装 K8S 与高可用，版本1.13.4

    环境介绍: CentOS: 7.6 Docker: 18.06.1-ce Kubernetes: 1.13.4 Kuberadm: 1.13.4 Kuberlet: 1.13.4 Kuberctl: ...