Pace.js在FireFox中加载耗时过长问题求助

Firefox和Chrome对资源加载的检测逻辑存在差异，Pace.js的默认监测规则在Firefox下容易误判未完成的资源，导致进度条卡在99%迟迟不完成。以下是几个实用的解决思路：

• 调整资源监测范围
  限制Pace只监测对页面渲染关键的资源，忽略非必要的请求（比如统计脚本、广告资源、静态图片等），避免Firefox的特殊加载行为干扰。示例代码：

  Pace.options = {
    // 忽略指定路径或后缀的资源
    ignoreURLs: ['/analytics', '/ads', /\.png$/, /\.jpg$/],
    // 只监测脚本、样式和文档资源
    monitorResources: ['script', 'style', 'document']
  };
  

• 手动触发进度完成
  当确认页面核心内容已经加载完成，但Pace仍未结束时，在合适的时机手动调用完成方法。比如在DOM加载完成后，给少量延时确保资源就绪：

  document.addEventListener('DOMContentLoaded', () => {
    // 根据实际页面情况调整延时时间
    setTimeout(() => {
      Pace.done();
    }, 600);
  });
  

• 排查Firefox专属资源
  Firefox可能会加载一些Chrome没有的资源（比如扩展注入的脚本、预加载的缓存资源），打开Firefox的开发者工具“网络”面板，查看进度条卡在99%时是否有未完成的请求，将这些请求的路径加入Pace的忽略列表。

• 升级Pace.js版本
  旧版本的Pace.js可能存在浏览器兼容性bug，更新到最新版本大概率能解决Firefox下的加载异常问题。

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