浏览器失焦后鼠标光标动态样式修改失效问题及解决办法咨询

问题原因 #

浏览器为了优化性能，在标签页失焦、鼠标静止在视口内时，会暂停非关键的视觉渲染更新。即便你通过JS或CSS修改了cursor属性，浏览器也不会立即将变更渲染到屏幕上，只有当鼠标移动、标签页重新获得焦点时，才会批量应用所有累积的样式变更。

可行解决方案 #

1. 强制触发重绘 #

每次更新光标样式后，触发一次浏览器重绘操作，强制浏览器应用样式变更。最简单的方式是读取元素的布局属性（比如offsetHeight），这会迫使浏览器立即计算布局并重绘：

const cursorTypes = ["default", "pointer", "text", "move", "help", "progress", "crosshair", "not-allowed", "zoom-in", "zoom-out", "grab", "grabbing"];
let cIndex = 0;

setInterval(() => {
  document.body.style.cursor = cursorTypes[cIndex];
  // 强制触发重绘
  void document.body.offsetHeight;
  cIndex = (cIndex + 1) % cursorTypes.length;
}, 500);

2. 改用setTimeout替代requestAnimationFrame #

requestAnimationFrame在标签页失焦时会被浏览器节流（调用频率大幅降低），改用setTimeout可以保证定时执行，配合强制重绘即可：

const cursorTypes = ["default", "pointer", "text", "move", "help", "progress", "crosshair", "not-allowed", "zoom-in", "zoom-out", "grab", "grabbing"];
let cIndex = 0;
const interval = 500; // 间隔毫秒数

function updateCursor() {
  document.body.style.cursor = cursorTypes[cIndex];
  void document.body.offsetHeight; // 强制重绘
  cIndex = (cIndex + 1) % cursorTypes.length;
  setTimeout(updateCursor, interval);
}

updateCursor();

3. 模拟鼠标事件触发光标重检（兜底方案） #

如果上述方法仍有问题，可以通过模拟鼠标移动事件，强制浏览器重新检查光标样式：

const cursorTypes = ["default", "pointer", "text", "move", "help", "progress", "crosshair", "not-allowed", "zoom-in", "zoom-out", "grab", "grabbing"];
let cIndex = 0;

setInterval(() => {
  document.body.style.cursor = cursorTypes[cIndex];
  // 模拟鼠标移动事件，触发光标重检
  const event = new MouseEvent('mousemove', {
    bubbles: true,
    clientX: 1,
    clientY: 1
  });
  document.body.dispatchEvent(event);
  cIndex = (cIndex + 1) % cursorTypes.length;
}, 500);

注意事项 #

• 强制重绘会带来轻微的性能开销，但对于光标这种低频率更新的操作来说可以忽略不计。
• 部分浏览器对失焦标签页的定时任务有额外限制（比如Chrome限制失焦标签的setInterval最低间隔为1000ms），如果需要更精准的定时，可能需要调整间隔时间。

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