讲多线程之前，我们先了解一下JS的事件机制

浏览器运行时，脚本必须定期让位给UI进程进行来维持网页的响应，闲置太长时间的脚本可能会被浏览器当成失控脚本，进而造成假死或弹窗

事件触发的设计javascript中的非阻塞IO机制让到来的消息在其他操作完成前排序等待，js以这种方式来模拟并发，它利用闭包、回调或promise来减少较慢操作的影响。

   多线程: 

   举个例子：假如女朋友在洗澡，她洗澡需要30~60分钟，你不可能在卧室兴奋而焦急地等待这么长时间吧，总得找点事做吧，别TM兴奋过度，反而之后萎了，等她洗完，该干啥就干啥，其实多线线程，就是同一时刻，执行多个线程，并发处理任务

javascript本身的事件机制，决定了javascript是单线程来处理事务，但在实际应用中，往往需要使用多线程来计算一些复杂的逻辑，却不能影响页面的渲染及事件使用，这样，多线程处理，显得必不可少，那么现在介绍几种实现多线程的方式:

我们先看个例子

  1. <script>
  2.      document.getElementById('test').onclick = function(){
  3.            alert(1);
  4.     }
  5.  
  6.     for(var i=0;i<100000;i++){
  7.          console.log(i);
  8.     }
  9. </script>
  10.  
  11. 浏览器直接卡死，或根本就没有反应，点击事件也用不了

What is the fuck?  这得多线程呀，咋弄？

1.  Concurrent.Thread.js 适用于老式浏览器

小日本是牛逼呀，这个插件就像女优一样优秀，总能给人惊喜、试一试的冲动。

          使用方式一：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <button id="test">测试</button>
  9.     <script src="Concurrent.Thread-full-20080319.js"></script>
  10.     <script>
  11.      document.getElementById('test').onclick = function(){
  12.          alert('出来啦');
  13.      };
  14.  
  15.      function cala(){
  16.         for(var i=0;i<100000;i++){
  17.                console.log(i);
  18.         };
  19.      }
  20.  
  21.      Concurrent.Thread.create(cala);
  22.     </script>
  23. </body>
  24. </html>

咋样，舒畅吧，头发去无踪，头屑更出众

使用方式二：    

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <button id="test">测试</button>
  9.     <script src="Concurrent.Thread-full-20080319.js"></script>
  10.     <script type="text/x-script.multithreaded-js">
  11.         document.getElementById('test').onclick = function(){
  12.             alert('射出来');
  13.         };
  14.  
  15.         for(var i=0;i<100000;i++){
  16.                console.log(i);
  17.         };
  18.     </script>
  19. </body>
  20. </html>

         2. Worker    适用于支持H5的浏览器

             不能在本地运行，需要在发布环境中执行

            

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <button id="test">测试</button>
  9.     <script>
  10.         document.getElementById('test').onclick = function(){
  11.             alert('射出来');
  12.         };
  13.  
  14.         var worker;
  15.  
  16.            //检测浏览器是否支持Worker
  17.         if(typeof(Worker) !== undefined){
  18.             worker = new Worker("worker.js");
  19.             worker.addEventListener("message",function(e){
  20.                 //关闭worker
  21.                 worker.terminate();
  22.             },false);
  23.         }else{
  24.             div.innerHTML = "IE已死，请更换浏览器!";
  25.         }                
  26.  
  27.     </script>
  28. </body>
  29. </html>

worker.js 文件

  1. for(var i=0;i<=100000;i++){
  2.    console.log(i);
  3.    //通知主线程，已经计算完了
  4.    if(i==100000) postMessage(i);
  5.  
  6. };

          

javascript多线程简介的更多相关文章

  1. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  2. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  3. JavaScript面向对象简介

    JavaScript面向对象简介 @(编程) [TOC] 1. 命名空间 命名空间是一个容器,它允许开发人员在一个独特的,特定于应用程序的名称下捆绑所有的功能. 在JavaScript中,命名空间只是 ...

  4. iOS开发多线程篇—多线程简介

    iOS开发多线程篇-多线程简介 一.进程和线程 1.什么是进程 进程是指在系统中正在执行的一个应用程序 每一个进程之间是独立的.每一个进程均执行在其专用且受保护的内存空间内 比方同一时候打开QQ.Xc ...

  5. Javascript多线程引擎(十)---Web服务器

     Javascript多线程引擎(十)---Web服务器 经过一天的努力, 引擎可以支持web服务的功能了并且支持UTF-8的编码, 具有对HTTP参数的解析,状态码的配置, 响应报文的输出等. 提供 ...

  6. Javascript多线程引擎(九)

    Javascript多线程引擎(九)--垃圾回收 垃圾回收这个话题对Programer来说是非常老旧的话题, 从手动的malloc/free 到半自动的 引用计数 再到全自动的 mark-sweep ...

  7. Javascript多线程引擎(八)

    Javascript多线程引擎(八)    Javascript 多线程项目, 做到现在已经快3个月了(加上前期准备编译原理和必要的文档), 该项目(js-engine)已经快进入尾声了, 现在该引擎 ...

  8. Javascript多线程引擎(七)

    Javascript多线程引擎(七)--synchronized关键字 经过两天的努力, 今天synchronzied关键字终于支持了, 如下是测试代码 thread() 是一个开启新线程的API, ...

  9. Javascript多线程引擎(六)

    Javascript多线程引擎(六) 经过三个月的时间, Javascript 引擎已经完成beta版本(还不支持多线程特性, 预计下个星期就可以支持了, 现阶段还在进行测试基本JS单元功能), 并且 ...

随机推荐

  1. Seconds_Behind_Master

    http://blog.chinaunix.net/uid-28212952-id-3494560.html 今天同事遇到一个故障,xtrabackup备份中flush tables with rea ...

  2. 利用 Composer 完善自己的 PHP 框架（二）——发送邮件

    本教程示例代码见 https://github.com/johnlui/My-First-Framework-based-on-Composer 回顾 上一篇文章中,我们手工建造了一个简易的视图加载器 ...

  3. 小白日记13：kali渗透测试之服务扫描（三）-SMTB扫描、防火墙识别、负载均衡识别、WAF识别

    SMTP扫描 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属于TCP/ ...

  4. 基于PHP的对接电子面单接口平台案例

    电子面单接口目前有三种对接方式,快递电子面单接口.菜鸟电子面单接口和快递鸟电子面单接口.这三种接口各有特点. 一.电子面单接口定义 1. 快递电子面单接口:快递公司自己开发的电子面单服务, 商家使用必 ...

  5. DefaultSingletonBeanRegistry extends SimpleAliasRegistry implements SingletonBeanRegistry

    // 用于内部标记的空的单例对象(不支持null)protected static final Object NULL_OBJECT = new Object(); // 缓存单例对象根据beanNa ...

  6. [django]自定义全局context

    1. 创建一个context processor函数 新建一个文件命名为custom_processors.py,把它放到项目app文件夹(例如我的blog文件夹),添加一个返回字典的函数,其代码如下 ...

  7. 关于Hadoop之父Doug Cutting

    生活中,可能所有人都间接用过他的作品,他是Lucene.Nutch .Hadoop等项目的发起人.是他,把高深莫测的搜索技术形成产品,贡献给普罗大众:还是他,打造了目前在云计算和大数据领域里如日中天的 ...

  8. 转：java服务器安全指南

    转: http://drops.wooyun.org/web/16609 JAVA安全之JAVA服务器安全漫谈 z_zz_zzz · 2016/06/08 10:50 0x00 前言 本文主要针对JA ...

  9. 7月15日学习之BOM

    setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() ...

  10. hide(1000)跟show(1000)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...