错误监控体系帮助团队快速定位问题，降低 MTTR。

核心概念

• window.onerror、unhandledrejection 捕捉运行时错误。
• Source Map 还原压缩后堆栈。
• 用户维度、浏览器版本等标签提升定位效率。

实战步骤

• 集成 Sentry/Datadog 浏览器 SDK。
• 将 release 信息与 Git 提交关联。
• 结合性能监控，分析错误与指标的关联。

渐进式 Web 应用需兼顾离线能力、安装体验与更新策略。

核心概念

• Service Worker 实现请求拦截与缓存。
• Web App Manifest 提供安装信息。
• 背景同步、推送等能力提升留存。

实战步骤

• 使用 Workbox 定义缓存策略与预缓存清单。
• 实现刷新提示，避免用户使用旧缓存。
• 在离线状态呈现降级 UI 并缓存关键数据。

进阶建议

• 结合后台任务 API 处理离线提交。
• 使用 IndexedDB 存储结构化数据。
• 监控 PWA 安装率与活跃度。

TypeScript 帮助团队管理复杂业务，需要设计稳健的类型策略。

核心概念

• 类型别名与接口组合表达领域模型。
• 条件类型可根据属性推导结构。
• 泛型约束提升复用性，配合模板字面量类型构建 DSL。

实战步骤

• 通过类型守卫定义运行时校验逻辑。
• 使用 zod/io-ts 保持运行时与编译类型一致。
• 构建 API 响应类型映射，避免 any。

进阶建议

构建优化直接影响加载速度，需从体积、请求数与执行效率入手。

核心概念

• Tree Shaking 依赖纯函数与无副作用模块。
• 代码分割按路由、组件或依赖维度拆分。
• 使用现代浏览器特性（ES2022、Differential Serving）减少 polyfill。

实战步骤

• 配置 bundler 的 sideEffects 字段，优化摇树效果。
• 引入 bundle-analyzer 定期审查依赖。
• 利用 HTTP/2 Push/Preload 管理关键资源。

测试保障代码质量，需要单元、集成与端到端多层覆盖。

核心概念

• 单元测试关注函数逻辑，集成测试验证模块协作。
• 通过 Test Doubles 隔离外部依赖。
• 代码覆盖率是参考指标，关注行为覆盖更关键。

实战步骤

• 使用 Vitest/Jest 统一测试框架，结合 ESM 支持。
• 构建数据夹具与工厂，减少重复。
• 在 CI 中并行执行测试并输出报告。

进阶建议

• 引入 Mutation Testing 度量测试质量。
• 集成 Playwright 进行 E2E 测试并结合截图对比。
• 将测试结果上传至 SonarQube 或 Allure。

Web 安全防护需要从编码、配置与监控三层入手。

核心概念

• XSS 分为反射型、存储型、DOM 型。
• CSP、SRI、Trusted Types 为前端提供防护手段。
• 依赖供应链攻击需通过审计与锁定版本防范。

实战步骤

• 对用户输入进行白名单校验与转义。
• 配置严格的 CSP 并监控 violation 报告。
• 使用 DOMPurify 清理富文本内容。

进阶建议

Web Worker 允许在后台执行计算密集型任务，减轻主线程压力。

核心概念

• Dedicated Worker 与 Shared Worker 适用场景不同。
• 结构化克隆算法限制传输数据类型，需注意可转移对象。
• Comlink 等库可简化 Worker 与主线程通信。

实战步骤

• 创建 Worker 池，提高多任务处理效率。
• 将图像处理、加密、数据解析迁移到 Worker。
• 使用 OffscreenCanvas 在 Worker 中渲染。

理解事件循环有助于定位 UI 卡顿与任务调度问题。

核心概念

• 浏览器运行时将任务分为宏任务与微任务队列。
• Node.js 事件循环阶段包含 timers、poll、check、close。
• 长任务会阻塞渲染，需要切片或 Web Worker。

实战步骤

• 使用 Performance API 检测超过 50ms 的长任务。
• 借助 MessageChannel 将任务拆分为微任务。
• 在 Node.js 中通过 setImmediate 控制阶段顺序。

合理运用异步模式是构建高性能 Web 应用的基础。

核心概念

• 任务队列与微任务决定 Promise 与回调的执行顺序。
• async/await 是 Promise 的语法糖，但需要错误处理策略。
• 并发控制可通过 AbortController 与信号实现。

实战步骤

• 封装 withTimeout 工具控制异步任务超时。
• 使用 Promise.allSettled 收集批量结果。
• 结合 Web Locks API 管理跨标签页资源访问。

ES Modules 成为浏览器与 Node.js 的统一标准，模块化策略决定应用的可维护性。

核心概念

• ESM 支持静态依赖分析，便于 Tree Shaking 与按需加载。
• CommonJS 与 ESM 在导入导出语义与执行时机上存在差异。
• 模块边界需要结合领域划分，避免循环依赖。

实战步骤

• 在 Node.js 中通过 type: module 启用 ESM，并使用 import.meta.url 处理路径。
• 使用 import() 实现路由级懒加载与错误捕获。
• 构建公共 API barrel 文件，对外暴露稳定接口。