实践案例：一个电商列表页的优化过程

优化事件监听器： 检查发现部分筛😎选按钮绑定了多个冗余的事件监听器

用户反馈页面响应变得“跟手”，快速操作🎉不再出现卡顿

更多精选文章

简单来说，FID越📚短，🚀用户感觉页面越“敏捷”

但用户实际使用中反映，当快速点击“加入购物车”按钮或筛选条件时，页面会明显卡顿，甚至出现短暂无响应

给百度和谷歌SEO从业者的建议

一个页面可能FID表现良好，但后续某个复杂🌟交互（例如动态加载内容时的点击）卡顿严重，导致INP指标恶化🔑，从而影响搜索排名和用户体验

延迟加载非首屏交互逻辑： 页面底🎯部的一些过滤功能（如价格区间滑块）的JavaScript代码，并不会在用🌺户首次进入页面时立即使用

合并同一元素的相似事件处理器，并在可能的情况下使用 poi🔮nterup 代替 click 事件，以缩短触摸设备的响应路径

理解网页核心指标：从FID到INP的演变

INP衡量的是用户与页面进行所有交互（🚀点击、按键、触摸）时，从交互发生到浏览器完成下一次页面绘制所需的最长时间

从FID到INP的优化要点总结

它记录了用户首次尝试与页面交互📌（如点击按钮、点击链接）时，到浏览器实际开始响应之间的时间

谷歌在2024年3月正式用INP（Interaction to Next Paint，交互到下一次绘制的时间）取代了FID，成为新的核心网页指标

吴淑芳

它关注的不只是首次交互，而是整个页面生命周期内的最差交互体验

优化策略：分解长任务与延迟非关键脚本 拆分长任务： 原本点击事件的处理函数在一个同步任务中完成了数据校验、AJAX请求发送、DOM更新（如弹出提示、更新按钮状态）等操作