讲多线程之前,我们先了解一下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. iOS开发——实用篇Swift篇&项目开发常用实用技术

    项目开发常用实用技术 实现拨打电话 要实现打电话功能,最简单最直接的方式便是:直接跳到拨号界面 (注意:这个需要真机调试,模拟器无效果)     UIApplication.sharedApplica ...

  2. 提升 composer 的执行速读

    常常遇到 php composer.phar update 等待一二十分钟还没有更新完成的情况. 提升速读的方法: 1. 升级PHP 版本到5.4以上 2. 删除文件夹Vender(或者重命名),之后 ...

  3. 进程环境之getrlimit和setrlimit函数

    每个进程都有一组资源限制,其中一些可以用getrlimit和setrlimit函数查询和更改. #include <sys/resource.h> int getrlimit( int r ...

  4. Jordan Lecture Note-12: Kernel典型相关分析(Kernel Canonical Correlation Analysis, KCCA).

    Kernel典型相关分析 (一)KCCA 同样,我们可以引入Kernel函数,通过非线性的坐标变换达到之前CCA所寻求的目标.首先,假设映射$\Phi_X: x\rightarrow \Phi_X(x ...

  5. C#并行编程 (Barrier,CountdownEvent,ManualResetEventSlim,SemaphoreSlim,SpinLock,SpinWait )

    背景 有时候必须访问变量.实例.方法.属性或者结构体,而这些并没有准备好用于并发访问,或者有时候需要执行部分代码,而这些代码必须单独运行,这是不得不通过将任务分解的方式让它们独立运行. 当任务和线程要 ...

  6. eclipse 总是提示文件下载

    在首选项->phpeclipse web development ->brower preview default 勾选掉

  7. 数据库字段类型中char和Varchar区别

    char和varchar区别 char类型:对英文(ASCII)字符占用1个字节,对一个汉字占用2个字节,char存储定长数据很方便,char字段上的索引效率级高,比如定义char(10),那么不论你 ...

  8. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  9. css笔记01:CSS例子

    body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font ...

  10. SSIS 学习(6):包配置(上)【转】

    Integrartion Services 包实际上就是一个对象属性的集合,在前面我们开发的所有 Integration Services包,其中的变量.属性,比如:数据库链接.同步文件目录等,我们都 ...