网站制作潍坊区域,宣传部网站建设策划书,建设企业网站的哪家好,买东西最便宜的网站Node的灵感来源于Chrome#xff0c;更是移植了V8引擎。在Node中能够实现的多线程#xff0c;在Web环境中自然也可以。 一、浏览器是多进程和多线程的复杂应用
在本系列的第二章节#xff0c;有提到现代浏览器是一个多进程和多线程的复杂应用。浏览器主进程统管全局#xf… Node的灵感来源于Chrome更是移植了V8引擎。在Node中能够实现的多线程在Web环境中自然也可以。 一、浏览器是多进程和多线程的复杂应用
在本系列的第二章节有提到现代浏览器是一个多进程和多线程的复杂应用。浏览器主进程统管全局每个Tab页都会创建一个渲染子进程同时还有GPU子进程、插件子进程等。
在每个Tab页即渲染子进程中都独立运行着一个V8引擎负责编译、优化和执行JS代码本节讲的Web Worker多线程也依赖于V8引擎由V8引擎负责统一调度。需要注意的是在浏览器中还有专门负责渲染UI的线程、网络请求的线程、请求加载和渲染图片的线程、本地存储的线程、音视频处理的线程、Websocket线程等这些线程由浏览器本身负责统一调度。
二、Web Worker实现多线程
使用 Web Worker 可以在JS代码中创建后台线程以执行耗时的 JavaScript 计算任务而不阻塞主线程从而提高页面的响应性。Web Worker的一些必知的知识点
**用户态线程**Web Worker创建的多线程是用户态线程更加轻量占用内存更少由V8引擎负责调度而Node中使用worker模块创建的Worker线程则是操作系统线程由操作系统进行调度和管理。**同源限制**Worker 脚本必须与创建它的主脚本在同一个源协议、域名、端口下运行。**无法访问DOM**Worker 无法直接访问主线程中的 DOM 元素或全局变量只能通过消息传递通信。**数据通讯**通过 postMessage 方法可以传递任意类型的数据对象、数组等但存在拷贝情况即消息通讯是有比较大的性能开销的只有CPU密集型的计算才应该考虑使用Worker线程。
//main.js主线程代码//创建一个新的 Web Worker指定 Worker 文件的路径
const worker new Worker(./mywork.js);//向 Worker 发送消息
worker.postMessage(5); // 发送数据给 Worker//监听来自 Worker 的消息
worker.onmessage function(event) {console.log(Main thread received message:, event.data);// 在这里处理从 Worker 返回的数据
};// 监听 Worker 的错误
worker.onerror function(error) {console.error(Worker error:, error.message);
};// mywork.jsWorker线程代码
// 监听主线程发送的消息
self.onmessage function(event) {console.log(Worker received message:, event.data);// 模拟一个耗时操作比如计算let result calculate(event.data);// 发送结果回主线程self.postMessage(result);
};// 模拟耗时计算
function calculate(data) {let result data * 2;return result;
}
三、其它在浏览器实现复杂计算的思路
**SharedArrayBuffer 和 Atomics**SharedArrayBuffer 允许多个 Web Worker 线程共享相同的内存缓冲区通过 Atomics 对象可以进行原子操作实现在多个 Worker 之间的线程安全的数据交换和同步。这通常比消息通讯更加高效详见本系列第三章节**OffscreenCanvas**允许在一个或多个后台线程中渲染图像减轻主线程的压力。它可以与 Web Worker 结合使用使得 Canvas 的渲染工作可以在后台线程中进行提高了动画和游戏等图形密集型应用的性能。Service Worker 特殊的Worker运行在浏览器背后独立于当前页面。即使Tab关闭它也能执行。**Web Assembly (Wasm)**通过将 C、C、Rust、C# 等语言编译成 Wasm可以实现高性能的计算任务但它并非 JavaScript 的替代品而是可以与 JavaScript 共存用于优化特定的计算密集型任务。**IndexedDB**浏览器中的本地数据库它可以在主线程外部执行操作不会阻塞主线程。虽然主要用于存储和管理大量数据但可以在一定程度上实现后台数据处理和数据操作。 *这是一个系列文章将全面介绍多线程、协程和单线程事件循环机制建议收藏、点赞哦 *你在并发编程过程中碰到了哪些难题欢迎评论区交流~~~ 我是functionMC function MyClass(){…} C#/TS/鸿蒙/AI等技术问题以及如何写Bug、防脱发、送外卖等高深问题都可以私信提问哦
