网页在 Edge 浏览器滚动卡顿？从 Performance 录制到根治的完整优化全过程

网页在 Edge 浏览器滚动卡顿？从 Performance 录制到根治的完整优化全过程前言最近我的网站首页在 Edge 浏览器上滚动时严重掉帧，鼠标滚轮一顿一顿的，体验极差，但是在chrome浏览器上就没有这个问题。我百度了很久，搜到的文章基本都是泛泛而谈"减少 DOM 操作""使用 CSS3 硬件加速"之类，没有一篇能真正定位到具体原因。最终我通过 Edge DevTools 的 Performance 面板逐帧分析，经历了三轮优化，彻底解决了问题。本文把完整的排查过程和优化思路记录下来，希望能帮到遇到同样问题的人。一、问题现象首页在 Edge 浏览器滚动时明显卡顿、掉帧Chrome 上相对流畅，Edge 更明显页面内容不算复杂，但视觉特效较多（毛玻璃、渐变、动画）二、排查方法：Performance 面板录制这是最关键的一步。不要猜，用数据说话。操作步骤F12打开 Edge DevTools