Firefox中React+d3-geo投影缩放至最大时卡顿问题排查

我正在开发React + D3的项目，核心使用d3-geo包处理地图投影。相关代码如下：

投影定义 #

const projectionFunction = d3[projectionName] || d3GeoProjection[projectionName]; 
let projection = projectionFunction().reflectX(true).clipAngle(90); 

useLayoutEffect(() => { 
  projection.scale(projection.scale() * scale); 
}, [scale, projection]);

缩放事件处理 #

通过d3.zoom实现缩放，修改scale状态同步投影缩放：

const zoomed = useCallback(function zoomed(e) {
  const { k } = e.transform;
  setScale(k);
}, []);

let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

拖拽旋转处理 #

通过d3.drag实现投影旋转：

function onDrag(e) {
  setRotation((cur) => {
    return [cur[0] - e.dx / (6 * scale), cur[1] - e.dy / (6 * scale)]; // 6用于降低旋转速度
  });
}

问题现象 #

代码在Chrome和Edge中运行流畅，但仅在Firefox中，当缩放至最大级别（scale=8，投影scale同步乘以8）时，旋转和缩放操作异常卡顿。

性能分析对比 #

• 拖动旋转时，Chrome的函数调用无明显延迟；Firefox的函数调用间隔约50ms，全程存在该延迟。
• scale=1（完全缩小）时，Firefox函数调用无延迟，运行流畅。
• scale≈4（半缩放）时，Firefox开始出现轻微延迟，但程度远小于最大缩放状态。

疑问 #

是否存在Firefox与D3交互的特殊问题？另外如果需要调整标签或更换发布渠道也请告知，我可以提供更多信息。

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