Firefox与Safari中React浮点数自动转整数、Chrome显示正常问题咨询

问题根因 #

• 核心错误是耗时统计的时机完全不符合异步逻辑：fetch是异步网络请求API，你当前在调用fetchData后立刻计算t1 - t0，统计的只是fetchData函数本身同步代码的执行耗时，并不是你想要的接口请求全链路耗时。
• 不同浏览器表现差异是因为各浏览器对短耗时场景下performance.now()的返回精度策略不同：Chrome会返回亚毫秒级的小数结果，而Firefox、Safari在极短耗时场景下会返回整数值，才会出现你观察到的表现差异。

修复方案 #

把耗时结束点的统计和setRuntime操作，移动到fetch请求的最终回调（finally块）中，确保统计的是从请求发起、到请求结束的完整耗时。
同时给toFixed调用加可选链兜底，避免runtime未初始化时的报错。

修改后的useEffect代码： #

useEffect(() => {
    const fetchData = (tableName) => {
      setData([]);
      const name = TABLE_NAMES.find((name) => name === tableName);
      if (name) {
        setError(false);
        const t0 = performance.now(); // 把开始时间移到fetch发起前
        fetch(getURL(tableName))
          .then((res) => {
            if (res.ok) {
              return res.text();
            } else {
              throw new Error("Something went wrong");
            }
          })
          .then((data) => convertToJson(data))
          .catch((error) => {
            console.log(error);
          })
          .finally(() => {
            // 请求完成后统计结束时间并赋值
            const t1 = performance.now();
            setRuntime(t1 - t0);
          });
      } else {
        setError(true);
        toast.error("Please enter a valid query");
        // 非法请求场景也给runtime赋默认值
        setRuntime(0);
      }
    };
    fetchData(tableName);
  }, [tableName]);

修改后的展示代码： #

const TableSection = React.memo(({ query, isOpen }) => {
  const { runtime } = useData(query);

    return (
          <>
            <p className="text-primary-dark">
              Query took: <span className="font-bold">{`${runtime?.toFixed(2) ?? '0.00'} ms`}</span>
            </p>
    </>
  );
});

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