第三阶段：渲染性能精细化调优

第一阶段：诊断与基线建立 在开始优化前，首先需要准确测量当前页面的INP表现

使用动态导入（Dynamic I⭐mport）或IntersectionObserver实现延迟加载

检查CSS选择器的复杂度 ：深层嵌套的选择📚器会增加样式计算✅成本，尽量保持扁平

第一阶段：诊断与基线建立

优化的核心思路是： 减🔍少主线程阻塞，将大任务拆碎并推迟非必要工作

一个常见的误区是只关注JavaScript性能，却忽略了CSS造成的布局抖动

第四阶段：进阶方案：合理使用Workers与预计算

建议建立以下循环： 在开发阶段就配置INP的Lighthouse CI检测，低于阈值才能合并代码

理解INP指标：从基础到高阶的优化路径

优先使用transform和opacity来实现动画 ：这两个属性不会触发重排与重绘，由合成器单独处理

理解INP指标：从基础到高阶的优化路径

一个优化良好的INP值，通常应控制在200毫秒以内，200至500毫秒为需要改进区间，超过500毫秒则可能对用户体验和搜索排名产生负面影响

1 第三方脚本的懒加载与异步化 大多数百度站点都集成了统计分析、广告、客服等第三方脚本