Web Worker

0. 前言

在一个页面中，会有许多的耗时操作，这些耗时操作会影响界面的流畅度，可能会出现卡顿的情况，那么，什么是耗时操作呢？就是一些耗费时间的操作，比如你的for循环，创建节点等，当然，我说的不是你就只创建一个节点，就创建一个节点，耗费不了多少时间，可是，你要创建很多呢？
那我们可以把你所耗时的那些操作，放在子线程里，等它运行完毕，回调到主线程，相当于异步操作，让子线程的操作进行着，主线程该干嘛干嘛去。

主线程和子线程.png

1. 简介

Web Worker的基本原理就是在当前 javascript 的主线程中，使用 Worker 类加载一个 javascript 文件来开辟一个新的线程，也可以说成子线程，起到互不阻塞执行的效果。

2. 改进前代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" id="box" value="点击我" />
        <h1 id="num"></h1>
        
        <script type="text/javascript">
            //在子线程 模拟一个耗时操作
            for (var i = 0; i < 1000000000; i++) {
                
            }
            num.innerHTML = i;      
            box.onclick = function () {
                alert("哈哈哈哈哈哈");
            }
        </script>
    </body>
</html>

改版前.gif

改版前那个for循环耗时操作，还是要耗费时间的，而且我在连续点击，会弹出很多次，在for循环结束后，你点击了几次，就会弹出几次，以为它被for循环阻塞住了做成了影响。

3. 改进后代码

主线程

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" id="box" value="点击我" />
        <input type="button" value="停止子线程的耗时操作" id="stop1" />
        <h1 id="num"></h1>
        
        <script type="text/javascript">
            //创建一个worker对象（创建一个子线程）
            var webworker;
            if (typeof Worker != "undefined") {
                //参数是耗时操作
                webworker = new Worker("./webworker.js");
                
                //监听子线程中运行的耗时操作，如果运行完毕，
                //回调到这里（主线程）更新UI代码
                webworker.onmessage = function (e) {
                    num.innerHTML = e.data;
                }
                
            } else {
                throw new Error ("不支持Worker对象");
            }
            box.onclick = function () {
                alert("哈哈哈哈哈哈");
            }
            stop1.onclick = function () {
                webworker.terminate();
            }
        </script>
    </body>
</html>

子线程

(function  () {
    //在子线程 模拟一个耗时操作
    for (var i = 0; i < 1000000000; i++) {
        
    }
    //耗时操作完毕后，调用postMessage方法回到主线程，
    //并且把数据传回去
    postMessage(i);
})();

改进后.gif

我把耗时操作放在另一个文件里，然后，我主线程该干嘛干嘛，这样两者也不会造成阻塞，流畅度也很好，解决了耗时操作可能会造成的阻塞影响。

4. 结束语

快过新年了，大家都在买着回家的票，而我今天刚买到回家到票，听说唐山今天下雪了，是不是有句话“瑞雪兆丰年”，哈哈，提前祝大家新年快乐哈，看到的记得给我点赞，发红包啊！！！

最后编辑于：2017.12.05 06:09:35