Web Worker

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

注意

1.性能上要注意

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

2.同源限制

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

3.DOM限制

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

4.通信联系

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

5.脚本限制

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

6.文件限制

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

Demo

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

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

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

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<button id="btn1">start worker!</button>
<button id="btn2">postMessage Main====>worker</button>
<button id="btn3">stop worker!</button>

<script src="main.js"></script>
</body>
</html>

main.js

(function() {
let startWorker = document.querySelector('#btn1');
let postMessage = document.querySelector('#btn2');
let stopWorker = document.querySelector('#btn3');
let worker;
let data = 10;

startWorker.addEventListener('click', () => {
worker = new Worker('worker1.js');
worker.addEventListener('message', (event) => {
console.log(event.data);
if (!event.data) {
console.log('closes worker thread');
worker.terminate();
}
}, false);

});

postMessage.addEventListener('click', () => {
worker.postMessage(data);
});

stopWorker.addEventListener('click', () => {
worker.terminate();
});
}());

worker1.js

(function () {
console.log('start worker');
this.addEventListener('message', (event) => {
let count = event.data;
setInterval(() => {
postMessage(count--);
}, 1000);
}, false);
}());

运行结果

Node.js的线程和进程

了解一下

Node.js的线程和进程

参考

MDN

Web Worker 使用教程

HTML5中Js多线程编程的更多相关文章

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

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

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

    上篇博客我们详细的聊了Spring中的事件的发送和监听,也就是常说的广播或者通知一类的东西,详情请移步于<JavaEE开发之Spring中的事件发送与监听以及使用@Profile进行环境切换&g ...

  3. Java中的 多线程编程

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

  4. Python中的多线程编程,线程安全与锁(二)

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

  5. Qt中的多线程编程

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

  6. C语言中的多线程编程

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

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

    原文地址:http://www.cnblogs.com/yinzixin/archive/2011/11/04/2235233.html .NET 4为了简化多线程编程,提供了System.Threa ...

  8. 每天进步一点点——论fork()函数与Linux中的多线程编程

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/27316803 一.fork()函数     在操作系统的基本概念中进程是程序的一次运行,且是 ...

  9. Python中的多线程编程,线程安全与锁(一)

    1. 多线程编程与线程安全相关重要概念 在我的上篇博文 聊聊Python中的GIL 中,我们熟悉了几个特别重要的概念:GIL,线程,进程, 线程安全,原子操作. 以下是简单回顾,详细介绍请直接看聊聊P ...

随机推荐

  1. js图片压缩和上传并显示

    由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...

  2. python 运算符重复

  3. 洛谷P1316 P1824

    P1316 丢瓶盖 题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以 ...

  4. Sublime中输入中文的解决方案

    之前系统用的输入法是 ibus,在sublime中无法使用, 可能是不支持该输入法. 然后改用 fcitx,切换输入法之后要重启系统才可以生效, 启动之后就可以使用中文了.

  5. oracle如何启用审计

    通过数据库初始化参数文件中的AUDIT_TRAIL 初始化参数启用和禁用数据库审计. DB  启用数据库审计并引导所有审计记录到数据库的审计跟踪 OS  启用数据库审计并引导所有审计记录到操作系统的审 ...

  6. oracle-ORA-01555错误

    Snapshot too old 原因:没有足够的撤销空间满足读一致性而需要撤销信息的长查询

  7. PLAY2.6-SCALA(八) comet

    Comet是指基于 HTTP 长连接的“服务器推”技术,是一种不需要客户端主动请求,服务端可以主动给客户端推送消息的技术. 1.使用chunked response来实现Comet chunked r ...

  8. hdu2044 dp

    /* 每一种情况都可以由周围2个点得出 */ #include<stdio.h> int main() { __int64 dp[]; int i,t,l,r; dp[]=; dp[]=; ...

  9. Java 调用restful webservice & jackson

    package com.bullshit.webcrawler.client.impl; import java.io.BufferedReader; import java.io.IOExcepti ...

  10. Python基础:01Python标准类型分类

    有三种不同的模式可以帮助我们对基本类型进行分类,每种模型都展示了这些类型之间的相互关系. 一:存储模式 这种分类模式,看这种类型的对象能保存多少个对象. 一个能保存单个字面对象的类型称为原子或标量存储 ...