什么是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. 【JS】逻辑处理

    1.计算会员进度 const a = res.data.directCount(当前充值点券) / nextLevelData.map(item => item.direct_number(下一 ...

  2. 三、部署DNS

    通常情况下配置好域后,DNS会默认安装好,但有时候这个DNS只能解析域控的域名,不能解析其他域名,比如baidu.com之类的.此时需要配置转发器,把不能解析的域名转到其他DNS配置如下: 打开DNS ...

  3. linux tar包追加问题

    只能已归档的文件才能追加文件. 如果tar.gz文件是如此生成:#tar -zcvf test.tar.gz  a.txt即tar.gz是压缩(-z)和归档(-c)文件,则无法给它追加文件:若果tar ...

  4. STM32之外部中断

    图1.0 图1.1 中断控制器支持23条中断线,其中16条是IO管脚中断线,分别是EXTI0~EXTI15:  图 1.2 另外七根中断线如下图: 中断线和管脚的对应关系:EXTI0~EXTI15 和 ...

  5. Python--列表中字符串按照某种规则排序的方法

    作者:禅在心中 出处:http://www.cnblogs.com/pinking/ 本文版权归作者和博客园共有,欢迎批评指正及转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  6. golang之匿名函数结合defer

    defer语句中的函数会在return语句更新返回值变量后再执行,又因为在函数中定义的匿名函数可以访问该函数包括返回值变量在内的所有变量,所以,对匿名函数采用defer机制,可以使其观察函数的返回值. ...

  7. Linux基本命令讲解

    前言 不多BB,直接上图 Linux命令行的组成结构 [root@oldwang ~]# [root@oldwang ~]# [root@oldwang ~]# [root@oldwang ~]# [ ...

  8. PHP 中 include 和 require 的区别详解

    require() 语句的性能与 include() 相类似,都是包括并运行指定文件.除了处理失败的方式不同之外.require 在出错时产生 E_COMPILE_ERROR 级别的错误,终止脚本运行 ...

  9. Docker 学习笔记（四）：问题日志

    一.Docker-Compose 容器组开机重启失败 Docker-Compose 的 depends_on 参数在 docker 中没有对应. 重启电脑后,容器的重启过程只由 docker 控制,而 ...

  10. Extending WCF using IServiceBehavior, IOperationBehavior, and IParameterInspector

    [ServiceContract(Name = "PasswordGenerator")] public interface IPasswordGenerator { [Opera ...