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

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

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

   多线程: 

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

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

我们先看个例子

<script>

     document.getElementById('test').onclick = function(){

           alert(1);

    }

    for(var i=0;i<100000;i++){

         console.log(i);

    }

</script>

浏览器直接卡死，或根本就没有反应，点击事件也用不了

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

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

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

          使用方式一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <button id="test">测试</button>

    <script src="Concurrent.Thread-full-20080319.js"></script>

    <script>

     document.getElementById('test').onclick = function(){

         alert('出来啦');

     };

     function cala(){

        for(var i=0;i<100000;i++){

               console.log(i);

        };

     }

     Concurrent.Thread.create(cala);

    </script>

</body>

</html>

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

使用方式二：    

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <button id="test">测试</button>

    <script src="Concurrent.Thread-full-20080319.js"></script>

    <script type="text/x-script.multithreaded-js">

        document.getElementById('test').onclick = function(){

            alert('射出来');

        };

        for(var i=0;i<100000;i++){

               console.log(i);

        };

    </script>

</body>

</html>

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

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

            

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <button id="test">测试</button>

    <script>

        document.getElementById('test').onclick = function(){

            alert('射出来');

        };

        var worker;

           //检测浏览器是否支持Worker

        if(typeof(Worker) !== undefined){

            worker = new Worker("worker.js");

            worker.addEventListener("message",function(e){

                //关闭worker

                worker.terminate();

            },false);

        }else{

            div.innerHTML = "IE已死，请更换浏览器!";

        }                

    </script>

</body>

</html>

worker.js 文件

for(var i=0;i<=100000;i++){

   console.log(i);

   //通知主线程，已经计算完了

   if(i==100000) postMessage(i);

};

          

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. JS原型连

    [推荐]关于JS中的constructor与prototype[转] 最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与proto ...

  2. JavaScript提高：003：easy UI实现tab页面自适应问题

    前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477只是有 ...

  3. MHA手动在线切换主 原创3（主不参与复制)

    monitor 执行:slave2连接到slave1,server1 不做(主/从复制角色,停在那里) [root@monitor app1]# masterha_master_switch --co ...

  4. 详解SQL Server连接（内连接、外连接、交叉连接）

    在查询多个表时,我们经常会用“连接查询”.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 什么是连接查询呢? 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 ...

  5. DebugView图文教程

    Debug信息捕获软件. 可以很方便的捕获系统实时输出的Debug信息,并保存为日志文件.可以远程捕获服务器上的Debug信息. 比较方便开发人员在系统发布前监控一些系统流程和异常,甚至在系统不大的情 ...

  6. HttpClient设置代理，超时，以及得到cookies

    import java.net.URI; import java.util.List; import org.apache.http.HttpEntity; import org.apache.htt ...

  7. Android ExpandableListView的技巧和问题

    前言: 最近一个多月在认真的学习Android和做项目,文章内容表达的不好或者理解错了,希望大家评论指出. :-) 本文是总结几个比较常用且使用的技巧,和一个大家都会遇到的问题. 文章中大部分语句摘抄 ...

  8. Lua垃圾收集

    Lua使用基于被内置在Lua某些算法的垃圾收集自动内存管理.可以自动内存管理的结果,作为一个开发者: 没有必要担心的对象分配内存. 无需释放他们时,不再需要可将其设置为nil. Lua使用运行不时收集 ...

  9. android.util.LruCache类

    值得一提的另一个类是android.util.LruCache<K, V>,这个类是Android 3.1(代号 Honeycomb MR1)引入的,可以在创建时定义缓存的最大长度.另外, ...

  10. 拼接json时小心C#中bool类型转化

    C#中bool类型的值,在ToString时会有如下转化:true—>Ture ; false—>False这是拼接到json串中就会出现如下结果:{ "no": &q ...