浏览器与性能

从输入 URL 到像素上屏：解析 HTML 建 DOM、CSSOM，合成渲染树，Layout 布局、Paint 绘制、Composite 合成。理解每个阶段的开销，才知道优化该压哪一环。

区分 Reflow（重排/布局）、Repaint（重绘）、Composite（合成）三者的代价差异；哪些属性触发哪种；用 transform/opacity 走 GPU 合成层避开昂贵的重排重绘；will-change 的正确用法。

DOM 事件的捕获与冒泡三阶段模型，addEventListener 的第三个参数（capture/once/passive），事件委托的原理与性能价值，以及 passive listener 解决滚动卡顿。

浏览器端存储方案对比：Cookie（带过期/同源策略/请求自动携带）、LocalStorage（持久、同源、5MB）、SessionStorage（标签页级）、IndexedDB（结构化、大容量、异步）。讲清各方案的边界与选型。

前端绕不开的网络：HTTP 缓存的强缓存（Cache-Control/max-age/ETag）与协商缓存（304），CDN 边缘缓存，以及"缓存策略怎么配才不会拿到旧资源"。

前端安全底线：同源策略与 CORS 的跨域机制、Content-Security-Policy 防注入、XSS（跨站脚本）与 CSRF（跨站请求伪造）的原理与防御要点。以"如何不被攻击"为主线。

用指标量化体验：TTFB、FCP、LCP、CLS、INP 各自衡量什么，Core Web Vitals 的阈值，以及如何用 Lighthouse / Web Vitals 采集真实数据。指标驱动优化，而非凭感觉。

围绕"让首屏更快"的加载优化：减少关键资源、压缩与 modern 构建、资源预加载（preload/prefetch）、图片优化（格式/响应式/lazy）、字体与第三方脚本治理。

页面"加载完但用着卡"的运行时优化：长任务与主线程阻塞、用 Performance 面板定位、避免频繁重排、虚拟列表、requestAnimationFrame 与节流防抖，让交互始终流畅。

JS 单线程的突破：Web Worker 把重计算移出主线程，避免卡 UI。讲清 Worker 的通信模型（postMessage/结构化克隆）、使用场景与限制，以及 Comlink 这类更易用的封装。

把前面的原理串成一条可执行的"首屏优化清单"：诊断→按指标定位→逐项优化（关键资源/图片/缓存/SSR/骨架屏）→用数据验收。附一份可直接照做的检查清单。