什么是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. 推荐两本CCF教材

    希望学习电脑程序设计的同学,可以购买如下两本教材,先学习入门篇,再学习基础篇.淘宝.当当.京东均有售.建议选择比较靠谱的网店,避免买到盗版书.

  2. 常见问题:MySQL/B+树

    平衡二叉树 此前讲红黑树时也提到了平衡二叉树,红黑树和AVL树都是能保证树不退化的平衡二叉树,平衡二叉树采用二分思想组织数据,能大大提高单点查找数据的效率,其组装过程略. 作为对比,此处也列出平衡二叉 ...

  3. jQuery插件——imgbox（点击图片查看大图）

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

  4. 如何取到el-select中的label

    在el-select中我们一般都是取到value的值,但是有时候我们需要value和label都需要.那怎么方便的取到呢 在网上经常有ref="cascader"这个方法,但是经过 ...

  5. 第07组 Alpha冲刺（2/4）

    队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...

  6. vue之$event获取当前元素的节点

    <p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // ...

  7. Centos7.5 添加环境变量并生效

    配置环境变量用户 jiangshan为例(base) [jiangshan@localhost ~]$ export PATH=$PATH:/usr/local/MATLAB/R2014a/bin/( ...

  8. Quartz.Net—初识

    什么是Quartz.Net 计划任务,定时框架.大到可以做灾难转移  负载均衡.小到可以做定时生成数据,数据更新等等. 官网 http://www.quartz-scheduler.org/    Q ...

  9. 剑指offer55：链表中环的入口结点

    1 题目描述 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 2 思路和方法 这是一个典型的链表中查找环的问题,基本思路是,首先设置两个快慢指针slow和fast,并且快指 ...

  10. 07 UML类图

    移步: https://www.cnblogs.com/coolstream/p/9572846.html