如何修复轮盘式（roulette style）数字选择器旋转时的卡顿问题

问题根源 #

你遇到的尾部卡片渲染延迟、动画超前问题核心来自两点：

1. 大量DOM节点（当前实现一次性渲染了29行共435个卡片元素）高速滚动时，浏览器需要实时计算可视区域内容，重绘压力过高导致掉帧
2. 基于setTimeout的重置逻辑触发时机受主线程任务调度影响，和CSS动画结束时机不同步，且未提前启用GPU加速，动画过程中切换合成层会出现卡顿

可落地优化方案 #

1. 新增CSS强制GPU加速配置 #

给轮盘容器添加以下属性，提前将整个轮盘放到GPU合成层，避免动画过程中才切换层导致的卡顿：

.roulette-wrapper .wheel {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

2. 替换setTimeout为transitionend事件监听 #

原来的6秒固定延迟逻辑极易受主线程阻塞影响出现时机偏差，修改为监听动画结束事件触发重置，完全对齐动画实际结束时机：

$(document).ready(function() {
  //setup multiple rows of colours, can also add and remove while spinning but overall this is easier.
  initWheel();

  $('button').on('click', function(){
    var outcome = parseInt($('input').val());
    spinWheel(outcome);
  });
});

function initWheel(){
  var $wheel = $('.roulette-wrapper .wheel'),
  row = "";
  
  row += "<div class='row'>";
  row += "  <div class='card red'>1<\/div>";
  row += "  <div class='card black'>14<\/div>";
  row += "  <div class='card red'>2<\/div>";
  row += "  <div class='card black'>13<\/div>";
  row += "  <div class='card red'>3<\/div>";
  row += "  <div class='card black'>12<\/div>";
  row += "  <div class='card red'>4<\/div>";
  row += "  <div class='card green'>0<\/div>";
  row += "  <div class='card black'>11<\/div>";
  row += "  <div class='card red'>5<\/div>";
  row += "  <div class='card black'>10<\/div>";
  row += "  <div class='card red'>6<\/div>";
  row += "  <div class='card black'>9<\/div>";
  row += "  <div class='card red'>7<\/div>";
  row += "  <div class='card black'>8<\/div>";
  row += "<\/div>";

  for(var x = 0; x < 29; x++){
    $wheel.append(row);
  }
}

function spinWheel(roll){
  var $wheel = $('.roulette-wrapper .wheel'),
        order = [0, 11, 5, 10, 6, 9, 7, 8, 1, 14, 2, 13, 3, 12, 4],
        position = order.indexOf(roll);
        
  //determine position where to land
  var rows = 12,
      card = 75 + 3 * 2,
      landingPosition = (rows * 15 * card) + (position * card);

  var randomize = Math.floor(Math.random() * 75) - (75/2);
  landingPosition = landingPosition + randomize;

  var easingX = Math.floor(Math.random() * 50) / 100,
      easingY = Math.floor(Math.random() * 20) / 100;

  // 先移除之前的事件监听避免重复触发
  $wheel.off('transitionend');
  $wheel.css({
    'transition-timing-function': `cubic-bezier(0,${easingX},${easingY},1)`,
    'transition-duration': '6s',
    'transform': `translate3d(-${landingPosition}px, 0px, 0px)`
  });

  // 动画结束后触发重置
  $wheel.one('transitionend', function() {
    $wheel.css({
      'transition-timing-function': '',
      'transition-duration': ''
    });
    var resetTo = -(position * card + randomize);
    $wheel.css('transform', `translate3d(${resetTo}px, 0px, 0px)`);
  });
}

3. 可选高阶优化（适合React版本实现） #

如果卡顿依然明显，可将一次性渲染29行的逻辑改为虚拟滚动：仅渲染视口可见区域+前后各2行缓冲卡片，滚动时动态复用DOM更新内容，DOM节点数量可降低80%以上，彻底解决渲染压力问题。

内容的提问来源于stack exchange，提问作者Tim Rayner