偶先页面白屏bug(查看下资源加载的状态)

125 阅读1分钟

情景如下 手机端 黑白屏手机 内嵌在 H5 页面白屏, 初步猜测: H5页面关键资源加载失败导致。

如下解决方案:查看下资源加载的状态, 加载失败则发请求去重新加载。 优化:可以设定再发请求的次数,避免陷入循环; 可以增加提示语:网络不稳定,请重试等等;可以增加接口,将未成功的数据存在后端,毕竟前端资源加载失败的时候,手机端的生产环境是没有任何记录的。


export function loadResource(url, type, retries = 3, delay = 1000) {
    return new Promise((resolve, reject) => {
      fetch(url)
        .then((response) => {
          if (!response.ok) {
            throw new Error(`存在资源加载失败: ${url}`);
          }
          return response.text();
        })
        .then((data) => {
          if (type === 'css') {
            const style = document.createElement('style');
            style.innerHTML = data;
            document.head.appendChild(style);
            resolve();
          } else if (type === 'js') {
            const script = document.createElement('script');
            script.innerHTML = data;
            document.body.appendChild(script);
            resolve();
          } else {
            reject(new Error('无效的资源类型'));
          }
        })
        .catch((err) => {
          if (retries > 0) {
            setTimeout(() => {
              loadResource(url, type, retries - 1, delay).then(resolve, reject);
            }, delay);
          } else {
            reject(err);
          }
        });
    });
  }
export function getresource() {
  let flag = window.performance && performance.getEntriesByType;
  // 获取所有资源的性能条目
  if (!flag) {
    return;
  }
  const resources = performance.getEntriesByType('resource');
  // 遍历所有资源并记录它们的URL和类型
  resources.forEach((resource) => {
    console.log(resource);
    console.log(`Resource responseStatus: ${resource.responseStatus}`);
    console.log(`Resource URL: ${resource.name}`);
    console.log(`Resource Type: ${resource.initiatorType}`);
    let name = resource.name;
    let responseStatus = resource.responseStatus;
    let initiatorType = resource.initiatorType;
    if (responseStatus != 200) {
      loadResource(name, initiatorType);
    }
  });
}