Web Worker 之全面讲解
💡
原文中文，约3800字，阅读约需10分钟。
📝
内容提要
Web Worker是一种前端优化的手段，通过在独立的后台线程中运行费时的处理任务，避免JS引擎线程阻塞GUI线程渲染视图。它可以解决由于大量计算导致页面卡顿的问题。
🎯
关键要点
- Web Worker 是一种前端优化手段，通过独立后台线程运行费时任务，避免 JS 引擎阻塞 GUI 渲染。
- 大量计算导致定时器回调不能如期执行，造成页面卡顿。
- 解决方案包括优化算法、使用 Web Worker 技术和参考 React Fiber 技术。
- 最终选择 Web Worker 技术，避免了加班和复杂实现。
- Web Workers 允许在主线程之外的后台线程中运行脚本，避免主线程被阻塞。
- 进程是 CPU 资源分配的最小单位，线程是 CPU 调度的最小单位。
- 浏览器是多进程的，每个 Tab 页相当于一个独立的进程。
- 浏览器进程包括主进程、GPU 进程和多个渲染进程。
- 渲染进程中有多个线程，包括 GUI 渲染线程和 JS 引擎线程，互斥关系导致 JS 执行时间过长会阻塞页面渲染。
- JS 阻塞页面加载，需避免长时间计算以保持页面流畅。
- Web Worker 允许在独立线程中执行计算，避免阻塞主线程，提升用户体验。
➡️
