html5多线程数量,HTML5中Js多线程编程

Web Worker

Web Worker是HTML5提出的新标准，为 Javascript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程(通常负责 UI 交互)就会很流畅，不会被阻塞或拖慢。

注意

1.性能上要注意

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

2.同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

3.DOM限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

4.通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

5.脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

6.文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统(file://)，它所加载的脚本，必须来自网络。

Demo

关于这个demo又几点需要注意的地方。

因Web Worker是HTML5的新标准所以ECMAScript的标准语法中并不支持，这个demo实在浏览器上进行测试，支持HTML的浏览器除IE外都能很好的兼容Web Worker，IE10部分兼容。我这里选择的chrome进行测试。

由于Worker构造函数 不能读取本地文件，关于worker线程的脚本文件需要通过网络下载，否则会报404(这点需要特别注意下)

为了顺利测试解决worker线程的脚本需要通过网络下载的问题这里我将WebWorkerDemo部署到本机的nginx上面使用chrom进行访问

index.html

​

start worker!

postMessage Main====>worker

stop worker!

​

main.js

(function() {

let startWorker = document.querySelector(&＃39;#btn1&＃39;);

let postMessage = document.querySelector(&＃39;#btn2&＃39;);

let stopWorker = document.querySelector(&＃39;#btn3&＃39;);

let worker;

let data = 10;

​

startWorker.addEventListener(&＃39;click&＃39;, () => {

worker = new Worker(&＃39;worker1.js&＃39;);

worker.addEventListener(&＃39;message&＃39;, (event) => {

console.log(event.data);

if (!event.data) {

console.log(&＃39;closes worker thread&＃39;);

worker.terminate();

}

}, false);

​

});

​

postMessage.addEventListener(&＃39;click&＃39;, () => {

worker.postMessage(data);

});

​

stopWorker.addEventListener(&＃39;click&＃39;, () => {

worker.terminate();

});

}());

worker1.js

(function () {

console.log(&＃39;start worker&＃39;);

this.addEventListener(&＃39;message&＃39;, (event) => {

let count = event.data;

setInterval(() => {

postMessage(count--);

}, 1000);

}, false);

}());

运行结果

Node.js的线程和进程

了解一下

参考

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

JavaEE开发之Spring中的多线程编程以及任务定时器详解

上篇博客我们详细的聊了Spring中的事件的发送和监听,也就是常说的广播或者通知一类的东西,详情请移步于

Java中的 多线程编程

Java 中的多线程编程 一.多线程的优缺点 多线程的优点: 1)资源利用率更好2)程序设计在某些情况下更简单3)程序响应更快 多线程的代价: 1)设计更复杂虽然有一些多线程应用程序比单线程的应用程序 ...

Python中的多线程编程，线程安全与锁(二)

在我的上篇博文Python中的多线程编程,线程安全与锁(一)中,我们熟悉了多线程编程与线程安全相关重要概念, Threading.Lock实现互斥锁的简单示例,两种死锁(迭代死锁和互相等待死锁)情况及 ...

Qt中的多线程编程

http://www.ibm.com/developerworks/cn/linux/l-qt-mthrd/ Qt 作为一种基于 C++ 的跨平台 GUI 系统,能够提供给用户构造图形用户界面的强大功 ...

C语言中的多线程编程

很久很久以前,我对C语言的了解并不是很多,我最早听说多线程编程是用Java,其实C语言也有多线程编程,而且更为简单.方便.强大.下面就让我们简单领略一下Unix C语言环境下的多线程编程吧! 下面先看 ...

.NET 4中的多线程编程之一：使用Task(转载)