什么是 Web Worker？

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

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。可以在页面上继续点击、选取内容等等。此时 web worker 在后台运行。

我的理解：因为 js 是单线程的，在执行脚本时如果遇到一个比较复杂的任务，可能会计算很久导致页面卡顿，造成不友好的用户体验，HTML5新增了web worker，它可以创建一个独立线程，不会阻塞主线程的代码执行，可以用于处理一些计算量大，时间较久的任务，在处理完后再将数据传回给主线程，不影响主线程渲染页面。

Web Worker 初体验

知识点和一些理解放在代码注释里了

test.html

<p>计数：<output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="endWorker()">停止工作</button>

<script>
    //初始化web worker
    let w;
    const startWorker = () => {
        //判断浏览器是否支持 web worker
        if (typeof (Worker) !== "undefined") {
            //判断 web worker是否存在
            if (typeof (w) == "undefined") {
                //创建 worker 对象，参数是个url，必须同源
                w = new Worker("./web-worker.js");
                console.log(w);
            }
            //添加onmessage方法，监听worker的消息
            w.onmessage = function (event) {
                console.log(event);
                //event.data是独立线程传给主线程的数据
                document.querySelector("#result").innerHTML = event.data;
            }
            //worker异常时触发
            w.onerror = function () {
                console.log('worker异常');
            }
        } else {
            document.querySelector("#result").innerHTML = "抱歉，你的浏览器不支持 web workers……"
        }
    }
    const endWorker = () => {
        //终止worker
        w.terminate();
        w = undefined;
    }
</script>

web-worker.js

let i = 0;
const count = () => {
    i++;
    //给主线程发送消息
    postMessage(i);
    //get一个新技能，setTimeout通过递归实现定时器效果
    setTimeout(count, 1000);
    // console.log(i);
}
count();

注意：worker 实例无法访问主线程中的 window 对象和 document 对象

应用场景

视频解码
预加载
加密数据
复杂数据处理

web worker 初体验，又是 get 新技能的一天

什么是 Web Worker？

Web Worker 初体验

应用场景