js脚本加载失败重试

2024-01-20 07:03| 来源: 网络整理| 查看: 265

背景

当我们在运行某一个项目时，它的某些JavaScript脚本可能加载不出来，报错。像现在单页界面应用基本上都是通过js来构建，一旦加载不出，这个项目就不能运行了，那怎么办？我们如何解决这个问题？

解决方案

这里采用的方案是，重新加载JavaScript脚本。那么什么时候去重新加载js，如何重新加载js？在js脚本加载不出来时，就需要去重试加载。那我们怎么知道js有没有加载失败，我们可以在 script src="https://cdn.topskys.org/v0/loadjs.js"> { const tag=e.target if(tag.tagName==='SCRIPT' && !(e instanceof ErrorEvent)) { console.log("JS 加载错误") } },true);

到这里页面解决了，什么时候去重新加载js的问题，还剩下如何重试加载js。

首先，我们需要引入多个新地址的script标签加载js，当某一个js加载失败时，就会被触发window监听事件error，执行重试更换域名生成新的script标签加载js，需要靠document.write()才能阻塞后面的js加载，不阻塞后续js加载，会造成js加载顺序混乱。

注意，在使用document.write()写入script标签时，需要对标签结束符进行转译，否则会被认为是上个标签的结束符。

Document const domains = ["https://cdn.topskys.org/v0", "https://cdn.topskys1.org/v1", "https://cdn.topskys2.org/v2"]; // 重试域名数组 const maxRetry=3; // 最多重试次数 const retryInfo={}; // 记录重试次数及下一个重试的域名数组下标{times:1,nextIndex:2} window.addEventListener("error", e => { const tag = e.target if (tag.tagName === 'SCRIPT' && !(e instanceof ErrorEvent)) { // console.log("JS 加载错误") const url=new URL(tag.src) // 拿到script标签的src域名 if(!retryInfo[url.pathname]){ retryInfo[url.pathname]={ times:0, nextIndex:0, } } const info=retryInfo[url.pathname]; // 取出文件路径 ./loadjs.js ./js.js ./y.js const script=document.createElement("script") url.host=domains[info.nextIndex]; // 更换域名 document.write(`\`); // 新加载script元素，需要阻塞后面的script加载js，否则加载js顺序会乱。注意转译，否则会被认为上面的script结束标签。 script.src=url.toString(); document.body.insertBefore(script,tag); // 将新的script标签插入加载错误标签前 // 修改重试信息 info.times++; info.nextIndex=(info.nextIndex+1)%domains.length; } }, true);

【本文地址】

公司简介

联系我们