原文链接: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 笔记-free命令

    free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer. focus@ubuntu:~$ free -h total used free shared b ...

  2. Nodejs.安装.非源码方式安装Node.js (Centos)

    已验证的适用环境: Centos6.x 树莓派官方ROM(Raspbian) 先去官网下载已编译好的安装包 https://nodejs.org/en/download/current/​ 以Cent ...

  3. MySql 5.7.20安装

    1.首先上MySql的官网下载  https://dev.mysql.com/downloads/mysql/ 以我所选版本为例(免安装版),选择MYSQL Community Server 然后在右 ...

  4. 【计算机网络】 一个小白的网络层学习笔记:总结下IP,NAT和DHCP

    前言:这篇文章是学习网络层协议时候总结的笔记,前面的主要部分介绍的都是IP协议, 后半部分介绍NAT协议和DHCP协议 参考书籍 <计算机网络-自顶向下>       作者 James F ...

  5. Mybatis通用Mapper

    极其方便的使用Mybatis单表的增删改查 项目地址:http://git.oschina.net/free/Mapper 优点? 不客气的说,使用这个通用Mapper甚至能改变你对Mybatis单表 ...

  6. WCF 内置跟踪日志

    Web.config 配置文件修改: <system.serviceModel> <diagnostics> <messageLogging logEntireMessa ...

  7. glog 使用

    glog 使用 来源:http://www.cnblogs.com/tianyajuanke/archive/2013/02/22/2921850.html 一.安装配置 1.简介 google 出的 ...

  8. Cactus

    Cactus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  9. Grunt打包之seajs项目【转】

    原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...

  10. 微信小程序入门(前言)

    最近接到一个开发微信小程序的任务,由于没有开发过小程序,所以只能查看官方文档.查找相关博文.资料来开发. 微信小程序一开始出现就受到热烈的追捧,因为其"无需安装.用完即走"的理念确 ...