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又几点需要注意的地方。

  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. 使用nuxt.js官方脚手架构建koa2的es6编译问题

    最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编 ...

  2. 一.JDBC学习入门

    一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...

  3. 使用Fiddler抓取到的“姐夫酷”API接口

    下午本来准备抓取些网页视频地址,做一个小的视频app,用来学习ijkplayer,无意中发现了一个app--姐夫酷,这是一个很简单的网页,它也有相应的一个比较简单的android app. 于是心血来 ...

  4. python ddt 实现数据驱动

    ddt 是第三方模块,需安装, pip install ddt DDT包含类的装饰器ddt和两个方法装饰器data(直接输入测试数据) 通常情况下,data中的数据按照一个参数传递给测试用例,如果da ...

  5. Java安全——密钥那些事

    标签(空格分隔): Java 安全 概念 密钥是加密算法不可缺少的部分.密钥在安全体系中至关重要,正如其名,私密的钥匙,打开安全的大门.密钥分两种:对称密钥和非对称密钥.非对称密钥里又包含公开密钥和私 ...

  6. 第三十二讲：UML类图(下)

    一个类能够看到另外一个类的属性和方法,那么这两个类是关联的.

  7. [React Native]Promise机制

    React Native中经常会看到Promise机制. Promise机制代表着在JavaScript程序中下一个伟大的范式.可以把一些复杂的代码轻松撸成一个串,和Android中的rxjava非常 ...

  8. 容器云平台使用体验：数人云Crane

    数人云在9月6日开通了容器管理面板Crane的试用活动,这是国内首个基于DockerSwarmKit的容器管理工具.它具有Docker原生编排功能,采用轻量化架构,帮助开发者快速搭建DevOps环境, ...

  9. 找顺数【数位dp】

    输出1到n中含有6的数的个数. 样例输入 100 样例输出 19 找规律感觉好难想(好像是什么100以内有19个,200以内有19*2个,600以内115个,700以内214个...,1000以内有2 ...

  10. phpcms信息模型使用

    PHPCMS V9 分类信息模型测试版下载 安装 1.确定您的phpcms版本为20110318版本以上 2.将所有文件覆盖到网站目录下,运行install_info. 3.将文件中所有的phpcms ...