什么是Web Worker

　　web worker 是运行在后台的 JavaScript，不会影响页面的性能。

　　当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

怎么用

HTML页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Web Worker</title>

</head>

<body>

<p>计数：<output id="result"></output></p>

<button onclick="startWorker()">开始计数</button>

<button onclick="endWorker()">结束计数</button>

<script>

    var w;  // 此时的w是undefined

    function startWorker() {

        // 判断当前浏览器是否支持Worker

        if(window.Worker){

            // 判断是否有w

            if(typeof(w) == 'undefined'){

                // 创建一个新的Worker对象，他会去执行demoWorkers.js这个文件下的JS代码

                w = new Worker('demoWorkers.js');

            }

            // 给Worker添加一个事件监听器，Worker子线程返回消息时被调用，返回的数据在data里

            w.onmessage = function (event) {

                console.log(event);

                console.log(event.data);

                document.getElementById('result').innerHTML = event.data;

            }

        }else{

            // 浏览器不支持Worker要做的事

            document.getElementById('result').innerHTML = '不支持Web Worker'

        }

    }

    function endWorker() {

        // 终止 web worker，并释放浏览器/计算机资源

        w.terminate();

        w = undefined;

    }

</script>

</body>

</html>

子线程demoWorkers.js代码

var i = 0;

function timeCount() {

    i = i+1;

    // postMessage()方法-它用于向HTML页面传回一段消息

    postMessage(i);

    setTimeout('timeCount()', 500)

}

timeCount();

效率对比

没有使用WebWorker：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>100000000以内累加总和为：<output id="result"></output></p>

<button onclick="startSum()">开始计算</button>

<script>

    function startSum() {

        console.time('1');

        var sum = 0;

        for(var i = 0;i<100000000;i++){

            sum += i

        }

        document.getElementById('result').innerHTML=sum;

        console.timeEnd('1');

    }

</script>

</body>

</html>

然后是耗时如下：

使用Web Worker：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>100000000以内累加总和为：<output id="result"></output></p>

<button onclick="startSum()">开始计算</button>

<script>

// Web Worker

    function startSum() {

        console.time('1');

        var w;

        if(window.Worker){

            if(typeof(w) == 'undefined'){

                w = new Worker('sumWorker.js')

            }

            w.onmessage = function (event) {

                document.getElementById('result').innerHTML = event.data;

            };

            console.timeEnd('1');

        }else{

            document.getElementById('result').innerHTML = '该浏览器不支持Web Worker'

        }

    }

</script>

</body>

</html>

sumWorker.js

var sum = 0;

for(var i = 0;i<100000000;i++){

    sum += i

}

postMessage(sum);

耗时如下：

JS多线程之Web Worker的更多相关文章

  1. JS利用HTML5的Web Worker实现多线程

    需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面 var number = 55;//传入分线程的参数 var worker = ne ...

  2. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  3. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  4. Web Worker

    写在前面 众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况 ...

  5. HTML5新增的一些属性和功能之八——web Worker

    Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...

  6. Web Worker无阻塞UI的牛逼技术，html5，可惜无法敢于UI

    众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕 ...

  7. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  8. web Worker使js实现‘多线程’？

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  9. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

随机推荐

  1. Docker从容器内拷贝文件到主机上

    //以elasticsearch容器为例 //运行es docker run -d -p 9200:9200 elasticsearch:5.4 //查看已运行的容器 docker ps //进去容器 ...

  2. 数据挖掘经典算法PrefixSpan的一个简单Python实现

    前言 用python实现了一个没有库依赖的"纯" py-based PrefixSpan算法. Github 仓库 https://github.com/Holy-Shine/Pr ...

  3. 微信小程序之 语言特点

    主页面的CSS样式默认为index.wxss,无需引入

  4. C#本地修改器

    C#本地修改器 C# 制作外挂常用的API C#做外挂的常用API,本人用了很久,基本没发现问题 using System; using System.Collections.Generic; usi ...

  5. Ubuntu18.04彻底删除MySQL数据库

    首先在终端中查看MySQL的依赖项:dpkg --list|grep mysql 卸载: sudo apt-get remove mysql-common 卸载:sudo apt-get autore ...

  6. mysql查看正在运行的语句

    mysql查看正在运行的语句 并且查看运行最多的mysql语句 MySQL 打开 general log 后,所有的查询语句都会记录在 general log 文件,文件为只读方式,但这样genera ...

  7. [转帖]负载均衡 LVS+Keepalived

    负载均衡 LVS+Keepalived https://www.cnblogs.com/jicki/p/5546862.html 改天试试 一直没搞过. 系统  CentOS 5.6 X64 物理机 ...

  8. TypeScript TSLint(TypeScript代码检查工具)

    TSLint是TypeScript代码的样式风格检查工具.类似于JavaScript的ESLint,或者Ruby的Rubocop. 配置TSLint TSLint是一个外部工具,我们需要进行一次安装工 ...

  9. Python-01-编程语言简介

    一.编程与编程语言 1. 编程的目的 计算机的发明,是为了用机器取代/解放人力,而编程的目的则是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而达到让计算机能够像人脑/电脑一样自动 ...

  10. python 之 并发编程（生产者消费者模型、守护进程的应用）

    9.8 生产者消费者模型 该模型中包含两类重要的角色: 1.生产者:将负责造数据的任务比喻为生产者 2.消费者:接收生产者造出的数据来做进一步的处理的被比喻成消费者 实现生产者消费者模型三要素:1.生 ...