Web Series | 现代 Web 开发基础与工程实践
📖 Home
🌟 Star on Github
💻 Code
Search…
Introduction
Node
Introduction
BFF
Egg
Express
GraphQL
Koa
Nest
事件 IO
全栈开发
包管理器
实时通信
工程实践
开发环境
快速开始
文件存储
权限认证
生产调优
系统进程
React
Introduction
Antd
Fiber 与调和算法
GraphQL
Hooks
React Router
Storybook
Ueact
事件系统
函数式组件
异步加载
快速开始
性能优化
服务端渲染
测试
状态管理
类 React 库
类组件
组件数据流
组件样式
组件系统
组件范式
背景特性
设计模式
过渡与动画
静态类型
Vue
Introduction
TypeScript
Vuex
工具链
性能优化
架构机制
状态管理
组件
工程实践
Introduction
Chrome Extension
Web 测试
Webpack
主题样式
低代码搭建
前端路由
响应式适配
国际化
异常处理
录屏与重放
控件开发
数据请求
构建工具
浏览器自动化
端到端测试
编码规约与协作
调试
面试准备
开发基础
Introduction
CSS 处理器
CSS 模块化
CSS
DOM
HTML
Observer
WebAssembly
WebWorker
SharedWorker
Worker
跨线程消息
jQuery
事件响应
元素布局
变换与动画
导论
数据存储
盒模型与文档流
网络请求
跨域通信
架构与优化
Introduction
MVVM
MobX
PWA
Redux
SPA
Svelte
Virtual DOM
WebComponents
优化案例
体验优化
内存优化
前端工程化
前端框架
微前端
性能监控与度量
浏览器工作机制
渲染执行优化
状态管理
组件化
资源加载优化
混合开发
Introduction
Cordova
Electron
Flutter
React Native
Remax
Taro
Weapp
小程序
Powered By
GitBook
WebWorker
Web Worker 即是运行在后台独立线程中的 JavaScript 脚本,可以用其来执行阻塞性程序以避免影响到页面的性能。Web Worker 的两大特性是高效与并行,因为浏览器是单线程的,任何大量耗时的 JS 任务都会卡住界面,使浏览器无法响应任何操作,这样的用户体验非常糟糕。Web Workers 可以将耗时任务拆解出去,降低主线程的压力,避免主线程无响应。但 CPU 资源是有限的,Web Workers 并不能增加总体运行效率,算上通信的损耗,整体计算效率会有一定的下降。
Worker 会运行在独立的不同于当前 window 的全局上下文中,因此我们并不能再 Worker 中进行 DOM 操作。
直接使用 Worker 构造函数创建的 Worker 被称为 Dedicated Worker, 其运行在所谓的 DedicatedWorkerGlobalScope 代表的上下文中,其仅允许创建脚本进行访问。
另一种 Shared Worker 则运行在 SharedWorkerGlobalScope 代表的上下文中,其允许多个脚本访问。
实际上 ServiceWorkers 也是 Web Worker 的一种,其常被用于 Web 应用之间,或者浏览器与网络之间的代理。ServiceWorkers 致力于提供更良好的离线体验,并且能够介入到网络请求中完成缓存与更新等操作;ServiceWorkers 同样能够被用于进行通知推送与后台同步接口。
Previous
概念与使用
Next
SharedWorker
Last modified
3yr ago
Copy link