Frontend

本文深度剖析了两大核心 Web 指标——CLS (Cumulative Layout Shift) 与 INP (Interaction to Next Paint)——的优化策略。针对 CLS，笔记详述了通过预留空间、CSS transform 动画及为媒体资源设定尺寸来维护视觉稳定性的实践。针对 INP，则深入探讨了“让出主线程”的核心原则，并介绍了从经典的 setTimeout 到现代的 isInputPending() 和 scheduler.postTask() 等多种任务调度技术。

本文深度剖析了核心 Web 性能指标 FCP (First Contentful Paint) 的优化策略。内容从理解其瓶颈——关键渲染路径 (CRP)——入手，系统性地阐述了三大核心优化支柱：通过打包和压缩缩短 CRP、利用 preload 优先加载关键资源，以及通过 defer 和 loading="lazy" 推迟与懒加载非关键资源。

本文深度剖析了核心 Web 指标 LCP (Largest Contentful Paint) 的优化策略。内容系统性地阐述了优化 LCP 的四大支柱：通过 preload 和 fetchpriority 优先加载 LCP 资源，优化资源本身（格式与响应式），利用懒加载减少网络竞争，以及通过缓存策略提升重复访问速度。

本文深度剖析了核心 Web 性能指标 TTFB (Time To First Byte) 的构成与优化。内容全面覆盖了四大核心优化策略：传输压缩（Gzip/Brotli）、协议升级（HTTP/2, HTTP/3）、服务器能力增强（应用/数据库优化）以及利用 CDN 缩短网络距离。

本文深度剖析了 Google 的 Core Web Vitals (LCP, CLS, INP) 以及其他关键的 Web 性能指标 (FCP, TTFB, FID)。内容涵盖了每个指标的精确定义、计算方式、官方性能阈值及它们在页面加载生命周期中的相互关系。