高性能JavaScript之 Web Workers

痛定思痛。 2021-12-20 11:41 301阅读 0赞

大多数浏览器让一个单线程共用于执行 JavaScript 和更新用户界面。每个时刻只能执行其中一种操作，这意味着当 JavaScript 代码正在执行时页面无法响应输入，反之亦然。当 JavaScript 代码执行时，用户界面处于 ‘锁死’ 状态。

用于执行 JavaScript 和更新用户界面的进程通常被称为 ‘浏览器UI线程’。UI 线程的工作基于一个简单的队列系统，任务会被保存到队列中知道进程空闲。一旦空闲，队列中的下一个任务就被重新提取出来并运行。这些任务要么是 JavaScript 代码，要么是执行 UI 更新，包括重绘和重排。

Web workers 是运行在 UI 线程之外的代码，它不但不会影响浏览 UI，也不会影响其他 Worker 中运行的代码。由于 Web workers 没有绑定 UI 线程，这也意味着他们不能访问浏览器的许多资源。Worker 的运行环境由如下部分组成：

*  一个 navigator 对象，只包括 appName、appVersion、user Agent、platform
 *  一个 location 对象（与window.location 对象相同，不过所有属性都是只读的）
 *  一个 self 对象，指向全局 worker 对象
 *  一个 importScripts() 方法，用来加载 Worker 所用到的外部 JavaScript 文件（同步的）
 *  所有 ECMAScript 对象
 *  XMLHTTPRequest 构造器
 *  setTimeout 和 setInterval 方法
 *  一个 close() 方法，用来停止 Worker

**与 Worker 通信**  
通过 postMessage() 方法给 worker 传递数据，使用 onmessage 事件处理接收到的信息。其实就是序列化和反序列化的过程，如果数据量过大，也会对性能造成一定的影响。

// 实际使用
    // main.js 
    var worker = new Worker('./worker.js')
    // 发送 大量 JSON 数据
    worker.postMessage(jsonText);
    // 接收 worker 返回来的数据
    worker.onmessage = function(event) {
    	var jsonData = event.data;
    	// 使用 jsonData;
    	...
    }
    // 监听 error 事件
    // message：可读性良好的错误信息
    // filename：发生错误的脚本文件
    // lineno：发生在哪行
    worker.onerror = function (event) {
        console.log("ERROR:" + event.filename + 'line:' + event.lineno + 'ERROR MESSAGE:' + event.message);
     }
    
    // worker.js
    self.onmessage = function(event) {
    	// JSON 字符串由 event.data 传入
    	var jsonText = event.data;
    	var jsonData = JSON.parse(jsonText);
    	// 回传结果
    	self.postMessage(jsonData);
    }