JavaScript 学习笔记

前言

本文仅是 Web Workers 的入门科普文章，不涉及太琐碎的知识点。

我们知道，在 Web Workers 出来之前，JavaScript 是单线程的。即使是 setTimeout 之类的看似多线程的函数，实际上也是单线程执行的。

有时，我们需要在浏览器执行一个比较耗时的计算：

function count() {
    let i = 0
    let sum = 0

    for (let j = 0; j < 100; j++) {
        for (let i = 0; i < 100000000; i++) {
            sum += i
        }
    }

    return sum
}

如果直接在浏览器执行这段代码，会把浏览器卡死。对于这类耗时的计算，可以通过多线程来解决。

多线程的重要性不言而喻。而工作线程（Web Workers），就是 JavaScript 的多线程解决方案。

创建工作线程

创建工作线程很简单，只要新建一个 Worker 对象就可以了。

css-demo/web-worker.html：

let worker = new Worker('worker.js')

这段代码创建了一个工作线程，用来执行 worker.js 的代码。我们可以在 worker.js 执行比较耗时的计算。

我们可以写一个简单的工作线程代码：

css-dmeo/worker.js：

console.log('hello world')

运行 css-demo/web-worker.html，可以看到控制台输出：

Failed to construct 'Worker': Script at 'file://xxx/javascript-demo/worker.js' cannot be accessed from origin 'null'

这是因为跨域的原因，导致代码执行失败。我们可以创建一个服务器环境（推荐 Http-server）来打开 HTML。

可以看到控制台输出：

hello world。

线程间消息传递

通常我们在工作线程完成计算后，需要将计算结果传回给主线程。我们可以通过 postMessage 方法把数据传给主线程。

web-worker-message.js：

postMessage('hello world')

主线程注册 onmessage 回调函数，通过 event.data 接收工作线程传递过来的数据。

web-worker-message.html：

let worker = new Worker('web-worker-message.js')
// 设置回调函数，接收 worker 传递过来的数据
worker.onmessage = function(event) {
    console.log(event.data)
}

执行后，控制台输出：

hello world

当然，我们也可以传递其他类型的数据。比如，要传递多个数据时，可以先构造个对象，再传递过去。

postMessage({
    data1: 'hello',
    data2: 'world'
})

API 介绍

postMessage

postMessage(data, origin)：工作线程向主线程传递数据，data 是传递的数据，origin 用来设置跨域相关的东西，这里不做介绍。

terminate

terminate() 函数用来结束工作线程。

web-worker-terminate.html：

let worker = new Worker('web-worker-terminate.js')
worker.terminate()

web-worker-terminate.js：

setTimeout(function () {
    console.log('hello')
}, 1000)

运行后，等了会儿，和预期的一样，控制台没有任何输出。

onmessage

onmessage：用来接收工作线程传递给主线程的消息。

onerror

onerror 用来处理线程错误。

web-worker-onerror.html：

let worker = new Worker('web-worker-onerror.js')
worker.onerror = function(e) {
    // 打印错误消息
    console.log(e.message)
}

web-worker-onerror.js：

undefinedFunction()

控制台输出：

Uncaught ReferenceError: undefinedFunction is not defined

除了普通的异常错误，404 等 HTTP 请求错误时也能回调。

let worker = new Worker('no-exist-url.js')
worker.onerror = function(e) {
    // 打印错误消息
    console.log(e.message)
}

控制台输出：

undefined

工作线程上下文

如果你试过在工作线程中执行 alert 函数，就会执行出错。

Uncaught ReferenceError: alert is not defined

这是因为在工作线程中，JavaScript 代码执行的上下文（Runtime Context）并不是 Window 对象。

你可以在工作线程中执行：console.log(Window)，控制台会输出：

Uncaught ReferenceError: Window is not defined

我们可以通过 console.log(this) 把工作线程中当前上下文对象打印出来。

输出的不是 Window 对象。由于上下文的不同，工作线程的 JavaScript API 会和以前的用法有点不一样。最大的区别在于：工作线程中不能操作 DOM。

工作线程的职责在于处理数据，然后把处理完成的数据传给主线程，主线程再根据数据更新界面。

可能有人觉得这样很麻烦，如果你做过多线程界面开发（比如 Android），应该清楚这样做的原因：在多个线程同时更新 UI 的很不安全的。

总结

知识点不多，对于一般的使用，应该足够了。