JS鼠标悬停Tooltip性能卡顿问题排查与优化方案咨询

你的Tooltip卡顿主要有两个核心原因：

• 高频事件无限制触发：要实现跟随鼠标移动，肯定得用mousemove事件，但这个事件每秒会触发几十甚至上百次，每次都直接修改DOM样式，浏览器根本来不及跟上这么频繁的重排请求，自然就卡顿了。
• 直接修改布局属性触发重排：每次设置style.left和style.top都会让浏览器重新计算元素布局（重排），连续触发的话会造成大量性能开销。

下面是优化后的代码，解决了上述问题：

JavaScript代码 #

const tileContainer = document.querySelector('.tile-container');
const tooltipDiv = document.createElement('div');
tooltipDiv.className = 'test-toolTip';
tooltipDiv.id = 'tooltip';
const tileArea = document.getElementById('TileArea');
tileArea.appendChild(tooltipDiv);
const tooltip = document.getElementById('tooltip');

const tile = document.createElement('div');
tile.classList.add('tile');
tile.innerHTML = `
    <h2>title</h2>
    <p>data</p>
`;

// 节流函数：限制事件触发频率，适配60fps刷新率
function throttle(func, delay = 16) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 处理Tooltip位置更新的函数
function updateTooltipPosition(e) {
  // 使用transform代替left/top，避免触发重排
  tooltip.style.transform = `translate(${e.pageX + 10}px, ${e.pageY + 10}px)`;
}

// 鼠标进入时显示Tooltip，绑定节流后的mousemove事件
tile.addEventListener('mouseenter', (e) => {
  tooltip.innerText = `title : data`;
  tooltip.style.display = 'inline-block';
  updateTooltipPosition(e);
  tile.addEventListener('mousemove', throttledUpdate);
});

// 鼠标离开时隐藏Tooltip，移除事件监听
tile.addEventListener('mouseleave', () => {
  tooltip.style.display = 'none';
  tile.removeEventListener('mousemove', throttledUpdate);
});

// 创建节流后的更新函数
const throttledUpdate = throttle(updateTooltipPosition);

tileContainer.appendChild(tile);

CSS调整 #

.tile-container {
    display: flex;
    flex-wrap: wrap;
}

.tile {
    margin: 5px;
    background-color: #f0f0f0;
    padding: 20px;
    box-sizing: border-box;
}

.test-toolTip {
  position: fixed;
  display: none;
  border-radius: 0.3rem;
  max-width: 130px;
  background: #ffffff;
  border: 1px solid rgb(69, 69, 69);
  padding: 6px;
  text-align: center;
  left: 0;
  top: 0;
  /* 告诉浏览器提前优化transform属性 */
  will-change: transform;
}

优化点说明 #

• 节流函数：把mousemove的触发频率限制在每16ms一次，刚好匹配60帧刷新率，减少不必要的DOM操作。
• 用transform代替left/top：transform属于合成属性，修改它只会触发浏览器的合成阶段，不会触发重排，性能开销小得多。
• 事件绑定优化：只在鼠标进入tile时绑定mousemove事件，离开时移除，避免无用的事件监听。
• will-change属性：提前告知浏览器这个元素的transform会频繁变化，让浏览器做好优化准备。

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