Web Worker

什么是Web Worker

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

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

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

怎么用

HTML页面代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Workertitle>
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>Titletitle>
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_第1张图片

 

使用Web Worker:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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);

耗时如下:

Web Worker_第2张图片

 

你可能感兴趣的:(Web Worker)