19、HTML5 高级 JavaScript 特性深度解析

HTML5 高级 JavaScript 特性深度解析

1. Web Workers

Web Workers 是 HTML5 中一个强大的特性，它允许在主线程之外创建一个新的线程来执行复杂或长时间运行的任务，从而避免阻塞主线程，提高用户体验。

1.1 数据传输与内存管理

在普通的 JavaScript 操作中，对象的传递是通过引用进行的，但在 Web Workers 消息传递中，数据是被复制的。这意味着在传输过程中会消耗双倍的内存。对于大多数类型的数据，这可能不是一个需要关注的问题，但对于大型数组等大量数据，在内存有限的移动设备上可能会导致问题。为了节省内存，应尽量减少保存大量数据的变量的生命周期。

例如，在主页面中创建 Web Worker 的代码如下：

var worker = new Worker("init_array.js");
worker.onmessage = function(evt) {
    alert("Data array initialization finished!");
    var data = evt.data;
};
worker.postMessage(); // tell our worker to start its task

1.2 兼容性处理

如果浏览器不支持 Web Workers，就需要在主线程中运行代码，这可能会导致页面卡顿。在这种情况下，可以将长时间运行的代码拆分成小块，每次执行一块，在执行间隙短暂暂停，让 UI 有机会更新。示例代码如下：