一、多线程理解

  首先,我们要理解什么是多线程,百度百科上说:多线程(英语: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. 《算法问题实战策略》——chaper9——动态规划法技巧

    Q1: 数字游戏: 两个人(A.B)用n个整数排成的一排棋盘玩游戏,游戏从A开始,每个人有如下操作: (1)    拿走棋盘最右侧或者最左侧的棋子,被拿走的数字从棋盘中抹掉. (2)    棋盘中还剩 ...

  2. java 检查是否是数组 检查是否是空数组 检查数组是否包含某个元素

    /** * Determine whether the given object is an array: * either an Object array or a primitive array. ...

  3. Border - SGU 133(排序)

    题目大意:有N对区间现在剔除一些区间,这些区间被另一些区间完全包含,如,Ai<Bi, Bj<Aj, A完全包含B,求出来这样被包含的区间个数. 分析:首先按照第一个数字先进行一下排序,然后 ...

  4. 通过代码来执行testng.xml

    大多数时候,我们都是通过Eclipse IDE上的操作命令来执行testng 框架下的case 运行.那如果我们不想通过这种方式,而是想通过代码调用来实现执行该怎么办?下面是我搜集的两种方式供大家参考 ...

  5. mysql创建数据库(指定编码)

    如下脚本创建数据库yourdbname,并制定默认的字符集是utf8. CREATE DATABASE IF NOT EXISTS yourdbname DEFAULT CHARSET utf8 CO ...

  6. pomelo 服务器之间的通信

    master服务器在启动的时候会启动mater服务,生成一个MasterAgent,作为中心服务器. 然后所有服务器,包括mater服务器,都会启动monitor服务,生成一个MonitorAgent ...

  7. thymeleaf 和其它标签组合 获取数据

    thymeleaf 有很多的内置标签, 但是我们在开发中会引入其它很多标签, 这个时候, 后台数据过来了,前端 页面要怎么显示呢? 网上资料真的很少. 不过还是找到了答案:  th:attr 这个标签 ...

  8. Android开源项目分类汇总【畜生级别】[转]

    Android开源项目分类汇总 欢迎大家推荐好的Android开源项目,可直接Commit或在 收集&提交页 中告诉我,欢迎Star.Fork :) 微博:Trinea    主页:www.t ...

  9. Unity UGUI——Rect Transform组件(基础属性)

    基础属性:Width.Height.Pivot图示 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXJfQUhhbw==/font/5a6L5L2T/fo ...

  10. javascript实现无缝上下滚动(转)

    js实现上下无缝滚动的原理是这样的: 1.首先给容器设定高度或宽度,然后overflow:hidden: 2.容器高度设定后,内容超出则被隐藏.3.改变容器的scrollTop(上下滚动)属性的值,让 ...