什么是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. SQL在线自助查询

    数据的日常查询统计分析是高频的需求,然而生产数据库由于安全.管理等方面的要求,仅仅对部分人员开发,例如DBA,总监等, 其他人员都要通过DBA才能查询数据,十分不便. 为了让DBA免于日常繁琐的工作, ...

  2. git的使用学习（一）git的简介和安装

    Git简介 Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). Git有什么特点?简单来说就是:高端大气上档次! 那什么是版本控制系统? 如果你用Microsoft Word写 ...

  3. 【嵌入式硬件Esp32】Ubuntu 1804下ESP32交叉编译环境搭建

    一.ESP32概述EPS32是乐鑫最新推出的集成2.4GWi-Fi和蓝牙双模的单芯片方案,采用台积电(TSMC)超低功耗的40nm工艺,拥有最佳的功耗性能.射频性能.稳定性.通用性和可靠性,适用于多种 ...

  4. sql 查找入职员工时间排名倒数第三（查找某一列特定排名）

    查找入职员工时间排名倒数第三的员工所有信息CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL, ...

  5. Eclipse+TestNG搭建接口自动化测试框架

    一.环境安装 1.前提 安装好jdk 配置好Java环境变量 安装Eclips 这些网上都有,就不再详细介绍. 资源分享链接:http://pan.baidu.com/s/1v9Fw6 2.安装Tes ...

  6. jenkins publish .net core application to linux server

    最近学习Docker与Jenkins, 网上大部分都是关于Jenkins+Git+Docker进行持续远程部署, 我一直在考虑为什么Jenkins和Docker要绑定一块使用, 因为我想单独使用Jen ...

  7. sqlservei 日志文件清除

    USE [master] GO ALTER DATABASE DFTDDB SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE DFTDDB SET ...

  8. MySQL基础操作（二）

    MySQL基础操作 一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用.注意:使用视图时 ...

  9. PAT甲级 Dijkstra 相关题_C++题解

    Dijkstra PAT (Advanced Level) Practice Dijkstra 相关题 目录 <算法笔记>重点摘要 1003 Emergency (25) <算法笔记 ...

  10. Python调用API接口的几种方式

    Python调用API接口的几种方式 相信做过自动化运维的同学都用过API接口来完成某些动作.API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课. 本文主要介绍py ...