前端资源加载失败后重试加载(CSS,JS等引用资源)

前端资源加载失败后的重试

.前端引用资源时出现了资源加载失败(这里针对的是路径引用异常或者url解析错误时)
解决这个问题首先要明确一下几个步骤

1.什么情况或者什么时候重试
2.如何重试
3.重试过程中的边界处理

这里引入里三个测试脚本，分别加载里三个不同的脚本其中1，3是正常输出，2的内部输出异常。但目前三个进本的加载时正常的




此时我们手动修改一个引用，让其出现加载异常这里修改1的引用地址

这里控制台目前捕获到了两种错误一种是引用地址引起的资源加载错误，一种是引用内部的错误；
前面我们提到过我们需要判断什么时候重试
这里我们针对的是资源加载异常也就是引用地址问题引起的
所以我们需要在一开始就先进行错误类型的判断。
因为我们浏览器加载的这些引用都属于同步任务，顺序进行的所以我们注册的时间应该放大最开始的位置


此时我们发现并没打印这个捕获，这是因为‘error’这类事件是不会冒泡的，当然你在监听这个窗口时就不会有捕获，所以脚本加载出现了异常但是由于不能冒泡到捕获内部所以无法得到监听，这个时候我们就需要开启冒泡，让这个监听发生在捕获期间


由于监听错误的事件针对的是整个窗口所有的错误当我们脚本内部，及引用都错误的时候这里会出现两次打印


可以利用监听事件内部提供的返回参数进行进一步处理


这里我们只处理类型是加载错误导致的，事件异常的我们不做处理，这样我们就得到了一个基本的加载错误类型的获取


借助返回参数内部的e.target 我们可以获取到脚本类型错误目标进一步缩小范围

重试的逻辑遵循上述前期获取的类型约束进行

<script>//可重试的资源列表const dmmains=['1121212.com','122323411.com','localhost:8082']//创建一个重试的映射关系，用来检测是重试过程失败还是默认资源失败const handleRetry={};window.addEventListener('error',(e)=>{if(e instanceof ErrorEvent || e.target.tagName!=='SCRIPT'){return}//获取当前资源的路径let basePath=e.target.src;//重新创建一个发送的url对象const urls=new URL(basePath);//根据获取的url对象获取基础的路径名称建立对应关系const keys = urls.pathname//判断当前的映射是否存在,用来记录是否是第一重试if(!(keys in handleRetry)){handleRetry[keys] = 0}//用来记录当前的映射地址的下标，方便在下次进行重试时重新进行地址切换const index = handleRetry[keys]//边界处理判断当前重试是否已经达到资源列表的最大值结束重试if(index>dmmains.length){return}const hosts= dmmains[index];//地址计数++ 进行下一步地址选取handleRetry[keys]++urls.host = hosts;//为了保证加载的顺序依旧这里需要人为阻塞一下页面加载线程，保证重试的脚本重试后加载顺序依旧与原来一直，// 这里针对特定环境，如果引用没有前后关系这里可以省略// document.write(`\<script src=${urls}><\/script>`) //特别注意该方式只针对特殊环境要求，因为会有性能问题，阻塞主线程加载console.log('当前重试的地址',hosts)//手动创建一个脚本元素，将当前重试地址替换进行重试const scripts=document.createElement('script');scripts.src = urls.toString()//将当前异常的脚本地址进行重试替换，将新重试的脚本放到异常脚本之前e.target.parentElement.insertBefore(scripts,e.target)//将重试结束的元素从页面中清除e.target.remove()},true)</script>

根据我们的资源列表进行了两次重试后正常加载了资源，但是我们发现结果返回的资源列表内打印的顺序不对，1重试后到了最后，针对特殊资源加载的要求如果需要预先加载某些特定资源时我们需要调整该顺序加载（但是资源加载的逻辑是同步的，我们需要人为阻塞线程让重试资源进行优先重试加载）

使用原生的 document.write进行阻塞，特别注意这里仅针对特殊要求下使用，该方式会阻塞线程造成性能问题