原文链接：http://www.cnblogs.com/woodk/articles/5199536.html

JavaScript多线程，在HTML5 WebWork没出现之前很多人都是用ConcurrentThread.js模拟多线程。

通常，我们也会用setInterval和setTimeout来模拟多线程。

多线程的概念介绍

浏览器事件触发线程，ajax，setTimeout，setInterval都会被放入最后面的一个程序池。

Concurrent.Thread.js

Concurrent.Thread.js是一个日本人开发的，用来让javascript也进行多线程开发的包，可以让我们将耗时的任务利用前端来模拟多线程。

下载地址：http://download.csdn.net/download/include_define/796952

教程文档：http://www.cnblogs.com/0banana0/archive/2011/06/01/2067402.html

下面我们试一下：

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <title>JavaScript多线程</title>

 7     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 8     <script type="text/javascript" src="Concurrent.Thread.js"></script>

 9     <style type="text/css">

10     div {

11         width: 100px;

12         height: 100px;

13         cursor: pointer;

14         background: orange;

15     }

16     </style>

17 </head>

18

19 <body>

20     <div id="test">

21         测试点击

22     </div>

23     <script type="text/javascript">

24     Concurrent.Thread.create(function() {

25         $('#test').click(function() {

26             alert(1);

27         });

28         /*下面有一段特别复杂的函数*/

29         for (var i = 0; i < 10000; i++) {

30             console.log(i);

31         }

32     });

33     </script>

34 </body>

35

36 </html>

可以发现，div能在打印i的时候正常响应了，非常牛掰的一个库~~

WebWork

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

注意：dom是不能被异步操作的! WebWork不能在本地使用

HTML5之WebWork使用方法：http://www.cnblogs.com/yxlblogs/p/3896786.html

webwork.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JavaScript多线程</title>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

    div {

        width: 100px;

        height: 100px;

        cursor: pointer;

        background: orange;

    }

    </style>

</head>

<body>

    <div id="test">

        测试点击

    </div>

    <script type="text/javascript">

    $('#test').click(function() {

        alert(1);

    });

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

    worker.onmessage = function(event) {

        // 消息文本放置在data属性中，

        // oBox.innerHTML = event.data;

        alert(event.data);

    }

    worker.postMessage(500000);

    </script>

</body>

</html>

task.js

onmessage = function(event) {

    var num = event.data;

    var result = 0;

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

        result += i;

        console.log(result);

    }

    // 向线程创建源送回消息

    postMessage(result);

}

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！

【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork的更多相关文章

  1. javascript实现多线程 Concurrent.Thread.js

    在这次我的项目中,因为前端要检测硬件加载并识别,再向后台请求发送数据,然后再返回的相应的配置文件!在这过程,要好时好几秒钟,严重影响体验效果,所以在网上靠看的方案,运用多线程去处理,这效果明显改善! ...

  2. JavaScript 编写多线程代码引用Concurrent.Thread.js(转)

    这是一个很简单的功能实现: <script type="text/javascript" src="Concurrent.Thread.js">&l ...

  3. JavaScript 编写线程代码引用Concurrent.Thread.js

    马上来下载和使用源码吧!假定你已经将下载的源码保存到一个名为Concurrent.Thread.js的文件夹里,在进行任何操作之前,先运行如下程序,这是一个很简单的功能实现: <script t ...

  4. Concurrent.Thread.js

    (function(){ if ( !this.Data || (typeof this.Data != 'object' && typeof this.Data != 'functi ...

  5. 转载:JavaScript多线程编程简介

    虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题.造成这些困难的主要原因是什么呢?是与服务器的异步通信问题?还是GUI程序设计问题呢?通常这两项工作都是由桌 ...

  6. 前端常用的库和实用技术之JavaScript多线程

    多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在 同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...

  7. javascript多线程简介

    讲多线程之前,我们先了解一下JS的事件机制 浏览器运行时,脚本必须定期让位给UI进程进行来维持网页的响应,闲置太长时间的脚本可能会被浏览器当成失控脚本,进而造成假死或弹窗 事件触发的设计javascr ...

  8. JavaScript多线程初步学习

    一.多线程理解 首先,我们要理解什么是多线程,百度百科上说:多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一 ...

  9. 【前端安全】JavaScript防http劫持与XSS

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...

随机推荐

  1. LINUX 笔记-wc命令

    命令参数: -c 统计字节数. -l 统计行数. -m 统计字符数.这个标志不能与 -c 标志一起使用. -w 统计字数.一个字被定义为由空白.跳格或换行字符分隔的字符串.

  2. 有关Datatabled的合并，排序和删除重复行的方法

    当某些操作需要涉及合并Datatable时,我们应该如何操作呢? 下面是自己总结的一些方法: 当有两表dt1和dt2的时候,使用dt1.Merge(dt2) 可以将表1表2中相同的合并在一起 排序方法 ...

  3. EF 数据重复和缺失问题（select 错误 ）

    字段有 id,name,password,sex 1.错误举例: var data = db.User.Select(d => d):   2修正 var data = db.User.Sele ...

  4. JAVA基础-XML的解析

    一.XML的概述 XML的全名为可扩展标记语言(Extensible Markup Language),XML的作用为:1.传输,2.存取数据,3.软件的配置文件.传输现在都用更轻量的Json,而存储 ...

  5. 压缩感知重构算法之压缩采样匹配追踪（CoSaMP）

    压缩采样匹配追踪(CompressiveSampling MP)是D. Needell继ROMP之后提出的又一个具有较大影响力的重构算法.CoSaMP也是对OMP的一种改进,每次迭代选择多个原子,除了 ...

  6. PHP开发框架之YII框架学习——碾压ThinkPHP不是梦

      前  言 JRedu 程序猿是一种慵懒的生物!能少敲一行代码,绝对不会多敲一个字符!所以,越来越多的开发框架应运而生,在帮助我们完成功能的同时,极大程度上也帮我们节省了人力物力,而且也提高了系统的 ...

  7. YYHS-猜数字（并查集/线段树维护）

    题目描述     LYK在玩猜数字游戏.    总共有n个互不相同的正整数,LYK每次猜一段区间的最小值.形如[li,ri]这段区间的数字的最小值一定等于xi.     我们总能构造出一种方案使得LY ...

  8. JS框架设计读书笔记之-核心模块

    随笔记录一下读书心得 1. 框架模块-核心模块 该模块是框架最先执行的部分,jQuery与vue中都有初始化的代码. 模块的功能主要是:对象扩展.数组化.类型判定.事件绑定和解绑.无冲突处理.模块加载 ...

  9. BZOJ-1968

    1968: [Ahoi2005]COMMON 约数研究 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 2308  Solved: 1768[Submit] ...

  10. 绕过校园网WEB认证_dns2tcp实现

    相信很多高校学生都有用WEB认证方式接入校园网的经历 拿我所在的大学为例,我们大学的校园网由联通公司承建,当我连上寝室的无线路由器后,浏览器会自动弹出一个由卓智公司开发的认证界面,如下图: 如果买了联 ...