Vue.js与JS实现图片对比动画卡顿 如何优化实现平滑过渡

核心卡顿原因 #

当前方案的性能瓶颈来自三点：

• 修改元素width属性会触发全链路重排（Reflow）：浏览器需要每帧重新执行布局计算、绘制、合成三层渲染流程，CPU占用极高，自然出现卡顿
• 频繁调用getBoundingClientRect会触发强制同步布局：每次读取布局属性后立刻修改样式，会打断浏览器的批量渲染优化，进一步加剧性能损耗
• mousemove事件触发频率远高于屏幕刷新率（最高可达每秒数百次），大量冗余的样式更新会直接导致掉帧

具体优化方案 #

1. 改用合成层属性实现裁剪，避免重排 #

放弃修改width，改用仅触发合成层更新的属性实现上层图片的裁剪，推荐两种方案二选一：

方案A：使用clip-path裁剪（最直观）

给上层背景图元素预设样式：

#beforeImage {
  z-index: 2;
  width: 100%; /* 固定宽度为100%，不再动态修改 */
  background-image: url(xxx);
  clip-path: inset(0 50% 0 0); /* 初始裁剪掉右侧50% */
  will-change: clip-path; /* 提示浏览器提前做渲染优化 */
}

JS代码只需要动态修改clip-path的右裁剪值即可：

// 初始化/容器 resize 时缓存容器尺寸，不要每次mousemove都读取
let containerWidth = this.$refs.afterImage.offsetWidth
let containerLeft = this.$refs.afterImage.getBoundingClientRect().left

// 监听resize事件更新缓存，避免容器尺寸变化后计算错误
window.addEventListener('resize', () => {
  const rect = this.$refs.afterImage.getBoundingClientRect()
  containerWidth = rect.width
  containerLeft = rect.left
})

// mousemove 事件逻辑
if (this.$refs.beforeImage && this.$refs.trackContainer && this.$refs.trackLine && this.$refs.afterImage) {
  const cursorPositionX = event.pageX || (event.targetTouches?.[0]?.pageX)
  event.preventDefault()
  event.stopPropagation()
  
  // 用requestAnimationFrame包裹更新，保证每帧只执行一次
  requestAnimationFrame(() => {
    let progress = ((cursorPositionX - containerLeft) / containerWidth) * 100
    progress = Math.max(0, Math.min(100, progress))
    // 直接修改clip-path，全程不触发重排重绘
    this.$refs.beforeImage.style.clipPath = `inset(0 ${100 - progress}% 0 0)`
  })
}

方案B：使用transform + overflow: hidden（兼容性更好）

给上层图片套一个父容器，父容器设overflow: hidden、宽度固定100%，内部的背景图宽度固定100%，通过transform: translateX()移动背景图实现裁剪效果，性能和clip-path方案一致，兼容更低版本浏览器。

2. 额外优化点 #

• 移除不必要的布局属性读取：将容器尺寸、偏移量的读取逻辑移到初始化和resize事件中，不要每次mousemove都调用getBoundingClientRect
• 避免重复的样式赋值：修改前先判断数值是否和上一次相同，相同则跳过赋值减少DOM操作
• 移动端适配时可以给触摸事件加passive: false避免滑动冲突，同时保证触摸响应流畅

内容的提问来源于stack exchange，提问作者R.Batyrshin