情景如下 手机端 黑白屏手机 内嵌在 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);
}
});
}