CLS优化的实操步骤

避免动态插入内容 💪：尤其是页面首屏之上的✅广告、弹窗或推荐位

常见的工具与检查流程 实际工作中，建议定期在以下工具中核对CLS和INP数据： 百度搜索资源平台 ：查看“体检报告”或“站点性能”部分，获取百度搜索⚡爬虫实际采集到的指标均值

INP优化的核心方法

使用字体显示策略 ：通过 font-display: swap 或 optional 来控制自定义字体的加载方式，防止因字体切换而导致🎊文本布局发生变化

优化事件处理 ：对于高频事件（如滚动、输入），应使用防抖（debounce）或节流（thro🤔ttle）技术，避免每帧执行大量计算

优先利用CSS的 aspect-ra❤️tio 或 min-height 来动态适应内容

规避常见误区

建议使用文档☀️片段（D⭐ocumentFragment）或虚拟DOM库，批量更新后再统一渲染

理解CLS与INP：核心用户体验指标

另外， addEventListener 🌅中尽量使用 passive: true ，告诉浏览🎊器不需要阻止默认行为，从而提升滚动流畅度

优先保证首屏加载速✅🎆度，再逐步消除布局偏移和交互延迟，这是比较稳妥的迭代顺序

规避常见误区 不要只优化桌面端而忽略移动端——百度移动优先索引使得移动端的CLS和INP权重更高