Firefox中自定义鼠标光标出现严重缓冲延迟，有无可行修复方案？

问题原因 #

Firefox对直接写在data URI里的内联SVG光标存在解析优化缺陷，鼠标移动时会反复触发SVG的光栅化计算，占用大量主线程资源导致光标延迟。

修复方案 #

• 优先使用光栅化图片格式替换SVG光标
  把SVG光标转换为PNG格式的data URI或者独立PNG文件，Firefox处理光栅图片的光标效率远高于矢量SVG，可完全消除重复渲染开销。
• 明确指定光标热点坐标
  在cursor属性的url参数后添加光标热点的xy坐标，避免Firefox每次动态计算光标对齐位置的额外开销，10*10尺寸的圆点光标推荐设置热点为5 5（居中）。
• 调整光标绑定的DOM节点
  不要给html根节点直接绑定光标样式，改成绑定到body节点或者页面顶层全屏容器，减少光标重绘时的影响范围。
• 必须使用SVG时提前预加载资源
  不要用内联的data URI形式，将SVG存为独立文件，通过<link rel="preload" as="image" href="cursor.svg">提前加载资源，避免重复解析。

修正后代码示例 #

<!DOCTYPE html>
<html>
<head>
  <!-- 预加载示例（可选，仅用独立SVG/PNG文件时添加） -->
  <!-- <link rel="preload" as="image" href="cursor.png"> -->
  <style>
    body {
      height: 100vh;
      margin: 0;
      /* 示例为10*10黑色圆点PNG的data URI，热点居中 */
      cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFUlEQVQYlWNgYGD4z8DAwMgABXAGNgGwSgwVAFbmAgXQdISfAAAAAElFTkSuQmCC") 5 5, auto;
    }
  </style>
</head>
<body>
</body>
</html>

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