前端资源加载失败后重试加载(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进行阻塞,特别注意这里仅针对特殊要求下使用,该方式会阻塞线程造成性能问题
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/76266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无刷电机槽数相同、转子极数不同的核心区别

一、基础原理差异 无刷电机的核心参数: 槽数(定子槽数,记为 ( Z )):定子铁芯上的绕组槽数量,决定绕组布局。极数(转子磁极数,记为 ( 2p )):转子上的永磁体磁极对数(总极数为 ( 2p ),如 ( p=4 ) 表示 8 极)。核心关系:槽极配合(( Z/2p ))决定电机电磁结构,相同…

6.Rust+Axum:打造高效 WebSocket 实时通信聊天室

摘要 本文详细介绍 RustAxum 在 WebSocket 实时通信开发中的应用&#xff0c;包括双向通信、状态管理等&#xff0c;实践构建聊天室应用。 一、引言 在当今的 Web 应用开发中&#xff0c;实时通信变得越来越重要。WebSocket 作为一种在单个 TCP 连接上进行全双工通信的协议&…

clickhouse数据导出导入

clickhouse数据导出导入 CSV格式导出为csv格式导入为csv格式 JSON格式导出为json格式导入为json格式 SQL格式导出为SQL CSV格式 导出为csv格式 # 不带表头 clickhouse-client -h 127.0.0.1 --database"db" --query"select * from db.test_table FORMAT CSV&qu…

人脸扫描黑科技:多相机人脸扫描设备,打造你的专属数字分身

随着科技的迅猛发展&#xff0c;人脸扫描这个词已经并不陌生&#xff0c;通过人脸扫描设备制作超写实人脸可以为影视制作打造逼真角色、提升游戏沉浸感&#xff0c;还能助力教育机构等领域生产数字人以丰富教学资源&#xff0c;还在安防、身份识别等领域发挥关键作用&#xff0…

学习型组织与系统思考

真正的学习型组织不是只关注个人的学习&#xff0c;而是关注整个系统的学习。—彼得圣吉 在这两年里&#xff0c;越来越多的企业开始询问是否可以将系统思考的内容内化给自己的内训师&#xff0c;进而在公司内部进行教学。我非常理解企业这样做的动机&#xff0c;毕竟内部讲师…

gl-matrix 库简介

gl-matrix 库简介 gl-matrix 是一个高性能的 JavaScript 矩阵和向量库&#xff0c;专门为 WebGL 和其他 3D 图形应用设计。它提供了处理 2D、3D 和 4D 向量以及矩阵运算的高效方法。 主要特性 高性能&#xff1a;经过高度优化&#xff0c;执行速度快轻量级&#xff1a;体积小…

大语言模型的训练、微调及压缩技术

The rock can talk — not interesting. The rock can read — that’s interesting. &#xff08;石头能说话&#xff0c;不稀奇。稀奇的是石头能读懂。&#xff09; ----硅谷知名创业孵化器 YC 的总裁 Gar Tan 目录 1. 什么是大语言模型&#xff1f; 2. 语言建模&#xff…

那些能够直接编译到 WebAssembly 的 Rust Crates

一、为什么有的 Crate “跑不起来”&#xff1f; 在最常见的 浏览器环境 中&#xff0c;Wasm 沙盒本身缺少操作系统功能和标准 C 运行时支持。以下几类依赖若出现在 crate 中&#xff0c;就很可能导致编译或运行时出错&#xff1a; C / 系统库绑定 浏览器环境没有 libc、dlope…

Ext系列⽂件系统

Ext系列⽂件系统 1. 理解硬件1.1 磁盘的物理结构1.2 磁盘的存储结构1.3 磁盘的逻辑结构理解过程实际过程 1.4 CHS&&LBA地址 2. 引入文件系统块分区innode 3. Ext2文件系统3.1 宏观认识3.2 block group3.3 块组内部3.3.1 GDT&#xff08;Group Descriptor Table&#xf…

元宇宙概念兴起,B 端数字孪生迎来哪些新机遇?

在科技飞速发展的当下&#xff0c;元宇宙概念如同一颗璀璨新星&#xff0c;迅速吸引了全球的目光。随着元宇宙的兴起&#xff0c;与之紧密相关的 B 端数字孪生技术也迎来了前所未有的发展机遇。元宇宙与 B 端数字孪生的融合&#xff0c;正悄然改变着多个行业的运作模式&#xf…

从数字化到智能化,百度 SRE 数智免疫系统的演进和实践

1. 为什么 SRE 需要数智免疫系统&#xff1f; 2022 年 10 月&#xff0c;在 Gartner 公布的 2023 年十大战略技术趋势中提到了「数字免疫系统」的概念&#xff0c;旨在通过结合数据驱动的一系列手段来提高系统的弹性和稳定性。 在过去 2 年的时间里&#xff0c;百度基于该…

4月18日复盘

4月18日复盘 一、深度学习概述 ​ 传统机器学习算法依赖人工设计特征、提取特征&#xff0c;而深度学习依赖算法自动提取特征。深度学习模仿人类大脑的运行方式&#xff0c;从大量数据中学习特征&#xff0c;这也是深度学习被看做黑盒子、可解释性差的原因。 ​ 随着算力的提…

C++每日训练 Day 17:构建响应式加载动画与异步数据处理

&#x1f4d8; 本篇目标是&#xff1a;在 GUI 信号机制基础上&#xff0c;构建一个完整的“点击按钮 → 显示加载动画 → 异步加载数据 → 显示结果”的响应式界面流程。通过协程挂起/恢复机制&#xff0c;实现清晰的异步逻辑&#xff0c;避免回调地狱。 &#x1f501; 回顾 Da…

PyTorch深度学习框架60天进阶学习计划 - 第45天:神经架构搜索(二)

PyTorch深度学习框架60天进阶学习计划 - 第45天&#xff1a;神经架构搜索&#xff08;二&#xff09; 第二部分&#xff1a;权重共享策略的计算效率优化 8. 权重共享的理论基础 权重共享策略的理论基础来自于多任务学习(Multi-Task Learning, MTL)和迁移学习(Transfer Learn…

深入理解分布式缓存 以及Redis 实现缓存更新通知方案

一、分布式缓存简介 1. 什么是分布式缓存 分布式缓存&#xff1a;指将应用系统和缓存组件进行分离的缓存机制&#xff0c;这样多个应用系统就可以共享一套缓存数据了&#xff0c;它的特点是共享缓存服务和可集群部署&#xff0c;为缓存系统提供了高可用的运行环境&#xff0c…

记录学习的第二十九天

还是力扣每日一题。 本来想着像昨天一样两个循环搞定的&#xff0c;就下面&#x1f447;&#x1f3fb; 不过&#xff0c;结果肯定是超时啦&#xff0c;中等题是吧。 正确答案是上面的。 之后就做了ls题单第一部分&#xff0c;首先是定长滑窗问题 这种题都是有套路的&#xff0…

Win11关闭防火墙方法

网上讲的win11的方法都试过了&#xff0c;但是在实际使用过程中还是会显示有威胁杀掉原本要使用的程序&#xff0c;下面我介绍的这个方法亲测有效&#xff0c;必须百分百关掉防火墙 搜索安全中心打开Windows安全中心 打开病毒和威胁防护 点击管理设置 将设置中所有显示开的都…

几个常用的快速处理服务器命令和故障排查

1. 查看剩余的内存 free -m top //当然了还有top可以实时观测 显示剩余内存,以M为单位. 2. 查看剩余的空间 df -h 显示指定磁盘文件的可用空间。如果没有文件名被指定&#xff0c;则所有当前被挂载的文件系统的可用空间将被显示 3.找出大文件的常用方法 du --max-depth1 -h –输…

Spring MVC 全栈指南:RESTful 架构、核心注解与 JSON 实战解析

目录 RESTful API 设计规范Spring MVC 核心注解解析静态资源处理策略JSON 数据交互全解高频问题与最佳实践 一、RESTful API 设计规范 1.1 核心原则 原则说明示例 URI资源为中心URI 使用名词&#xff08;复数形式&#xff09;/users ✔️ /getUser ❌HTTP 方法语义化GET&…

探索 JavaScript 中的 Promise 高级用法与实战

在现代 Web 开发中&#xff0c;异步编程已成为不可或缺的一部分。JavaScript 作为 Web 开发的核心语言&#xff0c;提供了多种处理异步操作的方式&#xff0c;其中 Promise 对象因其简洁、强大的特性而备受青睐。本文将深入探讨 Promise 的高级用法&#xff0c;并结合实际案例&…