一、多线程理解

  首先,我们要理解什么是多线程,百度百科上说:多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提升整体处理性能。具有这种能力的系统包括对称多处理机、多核心处理器以及芯片级多处理(Chip-level multithreading)或同时多线程(Simultaneous multithreading)处理器。[1]  在一个程序中,这些独立运行的程序片段叫作“线程”(Thread),利用它编程的概念就叫作“多线程处理(Multithreading)”。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程(台湾译作“执行绪”),进而提升整体处理性能。

  按照我的理解就是不阻塞的前提下,时间最优的方法,不局限于流水线(单线)的方法。理解多线程的原理后,结合javascript,本身javascript是不支持多线程的。把异步处理的东西放到一个池中,当同步的解决完即图中的t1到t7,然后唤醒异步队列。

  

  二、Concurrent.Thread.js

  Concurrent.Thread.js库是利用setTimeout和setInterval方法来模拟线程的概念。并行执行任务。下载地址:Concurrent.Thread.js

  主要是为了解决浏览器死卡的现象,当一个函数执行非常浪费时间和内存的时候,给另外开辟一个线程。因为javascript是单线程,会阻塞。这时候我们引入这个库文件,可以使代码不阻塞哦,应用方法主要是create方法创建一个单线程。

    Concurrent.Thread.create(function(){
$('#test').click(function () {
alert(1);
});
/*下面有一段特别复杂的函数*/
for (var i = 0;i<1000000;i++) {
console.log(i);
};
});

  这么就可以在浏览器上边点击div有效果,同时console也在一直不停的打印数据。各忙各的。

  这是理解Concurrent.Thread.js库应用的最简单方法。Concurrent.Thread提供了一个应用JavaScript 的异步通信方式实现的定制通信库。类似于AJAX的原理,用get或者post方法发送和响应数据。具体参考可以穿越链接http://www.cnblogs.com/0banana0/archive/2011/06/01/2067402.html,这里可以看到更详细的解释。

  三、WebWork

  js是单线程的去跑代码,比如如果做一个循环从0到一个很大的数字相加然后输出,浏览器可能会假死(无响应状态)。但是用webwork以后,就可以非常方便的进行渲染网页的同时,计算这个数据。在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启动性能以及理想的内存消耗。Web Worker 允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的及时响应。

  WebWork能做什么?

  1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信, 在主线程与子线程间进行通信,使用的是线程对象的postMessage和onmessage方法。不管是谁向谁发数据,发送发使用的都是postMessage方法,接收方都是使用onmessage方法接收数据。postMessage只有一个参数,那就是传递的数据,onmessage也只有一个参数,假设为event,则通过event.data获取收到的数据。

  2.可以在worker中通过importScripts(url)加载另外的脚本文件,即多个js文件

  3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval():定时器可以使用线程

  4.可以使用XMLHttpRequest来发送请求,使用AJAX

  5.可以访问navigator的部分属性:可以在localStorage和sessionStorage

  下面来具体说明一下webwork的专用线程使用步骤。

专用线程:Dedicated Worker

(1).当然是创建线程

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

(2).为了在页面主程序接收从多线程传递过来的消息,我们需要使用多线程的 onmessage 事件处理器,定义 onmessage 的实例代码如下:

 worker.onmessage = function (event) { ... };

(3).将数据传给线程

worker.postMessage(data);

(4).(worker.js)线程文件中返回结果给主页面

onmessage = function(event){
var num = event.data;
var result = 0;
for(var i=0; i<num; i++){
result += i;
} // 向线程创建源送回消息
postMessage(result);
}

共享线程 Shared Worker

定义:共享线程可以由两种方式来定义:一是通过指向 JavaScript 脚本资源的 URL 来创建,二是通过显式的名称。当由显式的名称来定义的时候,由创建这个共享线程的第一个页面中使用 URL 会被用来作为这个共享线程的 JavaScript 脚本资源 URL。通过这样一种方式,它允许同域中的多个应用程序使用同一个提供公共服务的共享线程,从而不需要所有的应用程序都去与这个提供公共服务的 URL 保持联系。

好吧,一大段文字说明看得头疼,简单的说就是创建了一个共享线程,特点是共享,所谓共享,就是财产公有嘛.页面脚本可以与共享型web worker通信,然而,与专用型web worker(使用了一个隐式的端口通信)稍微有点不同的是,通信是显式的通过使用一个端口(port)对象并附加上一个消息事件处理程序来进行的。在收到web worker脚本的首个消息之后,共享型web worker把一个事件处理程序附加到激活的端口上。一般情况下,处理程序会运行自己的postMessage()方法来把一个消息返回给调用代码,接着端口的start()方法生成一个有效的消息进程。

.......

  

  

JavaScript多线程初步学习的更多相关文章

  1. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  2. 状态保持以及AJAX的初步学习

    嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...

  3. 第二十篇 jQuery 初步学习2

    jQuery 初步学习2   前言:   老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...

  4. 第十九篇 jQuery初步学习

    jQuery 初步学习   jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...

  5. 以太坊web3开发初步学习

    以太坊web3开发初步学习 此文是对https://learnblockchain.cn/2018/04/15/web3-html/的学习再理解. 以太坊智能合约通过使用web3.js前端和智能合约交 ...

  6. Web Worker javascript多线程编程(一)

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

  7. Web Worker javascript多线程编程(二)

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

  8. 多线程的学习与python实现

    学习了进程与线程,现对自己的学习进行记录. 目录: 一.进程与线程的概念,以及联系与区别 二.多线程 三.python中多线程的应用 四.python实例 五.参考文献 一.进程与线程的概念.以及联系 ...

  9. 深入浅出的javascript的正则表达式学习教程

    深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...

随机推荐

  1. HDOJ1253 胜利大逃亡 BFS

    胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  2. 如何使用TcpDump抓取远程主机的流量并回显到本地的WireShark上

    ssh -t username@remoteip "echo rootpassword | sudo -S tcpdump -i eth0 -A '(tcp[((tcp[12:1] & ...

  3. Google幻灯片

    本博文的主要内容有 .Google幻灯片的介绍 https://www.google.com/intl/zh-CN/slides/about/ 自行去注册Google账号,这里,不多赘述.

  4. 手把手教学:详解HTML5移动开发框架PhoneJS

    摘要:HTML/JavaScript的优势自不必说,但却也并非完美,相比之下,原生App占内存更少.响应更快.本文详解了HTML5移动开发框架PhoneJS的使用全过程,通过它,能够让Web应用在移动 ...

  5. [转][JAVA]定时任务之-Quartz使用篇

    [BAT][JAVA]定时任务之-Quartz使用篇 定时任务之-Quartz使用篇 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与 ...

  6. [Flux] 2. Overview and Dispatchers

    Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact l ...

  7. ZYKeyboardUtil 全自动处理键盘遮挡事件

    键盘遮盖输入控件或按钮在日常app开发中避之不及,考虑各种情况下UI各种嵌套,最后还要注册监听再获取指定键盘信息.我们可以通过键盘处理工具类ZYKeyboardUtil避繁就简,利用Block的方式处 ...

  8. Java——(三)Collection之Set集合、HashSet类

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 一.Set集合 Set集合不允许包含相同的元素,如果试图把两个相同的元素加入同一个Set集合中, ...

  9. Android开发报错系列(一),java.lang.NullPointerException,at android.widget.ListView.setupChild

    问题描述:运行代码是报空指针错误,java.lang.NullPointerException,at Android.widget.ListView.setupChild 问题定位:listview控 ...

  10. date和long的相互转换

    import java.text.SimpleDateFormat; import java.util.Date; public class T { public static void main(S ...