什么是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. 【Chrome插件】Session Buddy--搁置标签页

    写在前面:看文章前请先看文章写作时间,避免浪费时间.2019-09-10 使用场景 Chrome打开许多网页,临时有事需要把当前的一些标签页一键保存,等待事后继续处理. 操作演示 原片地址:https ...

  2. Eclipse下Maven安装和配置

    1. 下载 Maven 在百度输入 Maven 搜索 ,找到它的官网(http://maven.apache.org/),点击进入下载页面. 下载页面地址: http://maven.apache.o ...

  3. Netty学习笔记(四)——实现dubbo的rpc

    1.rpc基本介绍 RPC ( Remote Procedure Call) -远程过程调用,是一个计算机通信协议.该协议允许运行于一台计算机的程序调用另一台计算机的子程序,两个或多个应用程序分布不同 ...

  4. DVWA 安全测试靶机本地搭建

    前期的搭建步骤这里就不多做表述了,网上文章很多,这里主要讲后续会遇到的问题和需要修改的地方.   首先将config-inc.php.dist  修改为config-inc.php 设置Key值 $_ ...

  5. [CF9D]How Many Trees?_动态规划_树形dp_ntt

    How many trees? 题目链接:https://www.codeforces.com/contest/9/problem/D 数据范围:略. 题解: 水题. $f_{i,j}$表示$i$个节 ...

  6. SSH无密码（密钥验证）登录的配置

    进入到我的home目录 cd ~/.ssh [root@shtppATTSTPUBv03 home]# cd ~/.ssh [root@shtppATTSTPUBv03 .ssh]# pwd /roo ...

  7. ideaui安装破解、相关配置、JRebel破解

    前言: Ideaui 2019(官网 https://www.jetbrains.com/idea/?fromMenu) 安装软件就简单啦,下载选择路径就完事了,注意文件名全英文:   但是按照咱们传 ...

  8. Java Web-JQuery学习

    Java Web-JQuery学习 JQuery概念 是一个JS框架,可以用来简化JS的开发,设计宗旨是"write less,do more",即写更少的代码,做更多的事情.它封 ...

  9. Linux：定时任务crond服务

    一.crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动cro ...

  10. 在Eclipse配置Tomcat服务器+JSP实例创建

    欢迎任何形式的转载,但请务必注明出处. 1.jdk安装及环境配置 点击进入教程 2.Eclipse安装 点击进入官网下载 注意下载完成打开.exe后,出现的界面,有很多版本供选择.选择下图版本 3.T ...