前端项目中资源请求顺序和dom结构顺序不一致,资源启动器有(索引)解析器和脚本

news2025/7/17 12:36:10

红色框资源是在组件1中

绿色框资源是在组件2中

在页面 DOM 结构中组件顺序是,从上到下:组件1->组件2

但是查看 chrome调试工具的网络请求,发现绿色资源先请求,并且像是请求完才会去请求红色资源,它们启动器那一栏的分类也不一样,有“解析器”和“脚本”,如图

排查问题

1. 检查组件1是否设置了延迟加载

排查结果:没问题

2. 检查是否和图片资源有关,调换组件1和组件2的两张图片,运行后看资源请求顺序是否还是组件2的在前

排查结果:没问题,仍然是组件2的资源先加载
 

3. 查看组件1和组件2的资源数据设置方式是否一致

组件1
组件2

排查结果:不一致,发现组件1直接使用父组件传递prop数据,设置资源数据。而组件2是在 mounted 周期时才设置资源数据

解决方法:修改组件2的代码,没有必要在mounted周期时对获取数据,直接使用父组件传递的prop数据即可

修改之后,资源请求顺序正常

 

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

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

相关文章

C++语法——make_heap、push_heap、pop_heap、sort_heap使用介绍

目录 一.make_heap(...) 二.push_heap(...) 三.pop_heap(...) 四.sort_heap(...) 这三个函数位于<algorithm>头文件中。 可以看这篇文章了解堆排序&#xff1a;手把手教你堆排序 一.make_heap(...) 这是该函数的官方定义&#xff1a; 这个函数用于建立堆。 前两个…

Linux日志管理logrotate日志轮转

文章目录 前言 日志轮转简介 工作原理 配置文件种类 观察主文件和子文件 主配置文件介绍 yum日志轮转示例 配置轮转规则 rotate 3演示 总结 前言 上篇文章学习了系统日志管理&#xff0c;对于日志来讲他是占内存的&#xff0c;当有大量的日志产生的时候&#xff0c;会…

一个简单HTML5期末考核大作业,学生个人html静态网页制作代码

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

m基于PSO粒子群优化的第四方物流的作业整合算法matlab仿真,对比有代理人和无代理人两种模式下最低运输费用、代理人转换费用、运输方式转化费用和时间惩罚费用

目录 1.算法概述 2.仿真效果预览 3.核心MATLAB程序 4.完整MATLAB程序 1.算法概述 粒子群优化 (PSO)算法是通过模拟鸟群觅食过程中的迁徙和群聚行为而提出的一种基于群体智能的全局随机搜索算法。PSO是将群体(swarm)中的个体看作是在D维搜索空间中没有质量和体积的粒子(part…

Paddle入门实战系列(一):基于PaddleOCR的车牌识别

✨写在前面&#xff1a;强烈推荐给大家一个优秀的人工智能学习网站&#xff0c;内容包括人工智能基础、机器学习、深度学习神经网络等&#xff0c;详细介绍各部分概念及实战教程&#xff0c;通俗易懂&#xff0c;非常适合人工智能领域初学者及研究者学习。➡️点击跳转到网站。…

MySQL十秒插入百万条数据

mysql数据库准备 private String Driver "com.mysql.cj.jdbc.Driver";private String url "jdbc:mysql://localhost:3306/mp?serverTimezoneAsia/Shanghai&rewriteBatchedStatementstrue";private String user "root";private String pa…

Pycharm 翻译插件失效(transaction) 问题解决【包括安装视频教程】

嗨害大家好鸭&#xff01;我是小熊猫❤ 最近有很多朋友反应 翻译插件用不了了(不想看文章的朋友 可以直接点击文章最下方QQ群 领取视频版教程) 那么今天&#xff01;&#xff01;&#xff01; 教大家如何快速解决这个问题 点击文件(file) —> 设置(setting) 点击工具(t…

【附源码】计算机毕业设计JAVA家庭园艺服务平台

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

【Node.js】 第四章 模块化

目录 1. 模块化的概念 1.1 模块化的概念 1.2 模块化规范 2. Node.js中的模块化 2.1 模块分类 2.2 模块加载 2.3 模块作用域 2.4 向外共享模块成员 2.5 exports对象 2.6 Node.js中的模块化规范 1. 模块化的概念 1.1 模块化的概念 按照模块指定规则&#xff0c;把一…

什么是智能合约?新手入门指南

智能合约&#xff0c;也称为数字合约&#xff0c;在计算机网络中使用区块链技术来履行预编程的合约当合同的条件得到满足时&#xff0c;智能合同就会执行&#xff0c;例如向合同的一方发送付款。 智能合约之所以具有吸引力有多种原因&#xff1a; 不信任。由于智能合约及其条…

【c++ 】 对象与类中方法的调用关系。类中常方法,普通方法,静态方法之间互相的调用关系

对象与类中方法的调用关系。类中常方法&#xff0c;普通方法&#xff0c;静态方法之间互相的调用关系1.对象与方法之间的调用1.常对象只能调用常成员方法2.普通对象既可以调用普通成员方法&#xff0c;也可以调用常成员方法&#xff0c;当两个同名的常成员方法和普通成员方法重…

你安全吗?丨秦淮到底是哪种黑客?你猜对了吗?

作者&#xff1a;黑蛋 大家都知道黑客&#xff0c;但是黑客也分很多种类&#xff0c;那么秦淮属于哪种黑客呢&#xff0c;我们先来看一看黑客的种类&#xff1a; 1、白帽黑客&#xff1a;白帽黑客是指通过实施渗透测试&#xff0c;识别网络安全漏洞&#xff0c;为政府及组织工…

蓝桥杯入门即劝退(九)罗马数字

“为什么你没有变强&#xff0c;因为你最近一直过得太舒服” ----------持续更新蓝桥杯入门系列算法实例------------- 如果你也喜欢Java和算法&#xff0c;欢迎订阅专栏共同学习交流&#xff01; 你的点赞、关注、评论、是我创作的动力&#xff01; -------希望我的文章对你有…

数字孪生3d智慧核电可视化场景应用展示,包括:智能计算,智能运维

最近几年来&#xff0c;数字孪生技术已被应用于核电领域&#xff0c;并且国内已有一些公司在具体实践过程中&#xff0c;通过数字孪生赋能核电更加经济、灵活、高效运维。 北京智汇云舟科技有限公司成立于2012年&#xff0c;专注于创新性的“视频孪生&#xff08;实时实景数字孪…

c++ 正则表达式

文章目录正则表达式基本语句regex_matchregex_searchregex_token_iteratorregex_replace示例匹配电话号码匹配QQ号码匹配IP地址正则表达式 什么是正则表达式&#xff1f; 正则表达式(regular expression)描述了一种字符串匹配的模式&#xff08;pattern&#xff09;&#xff0…

GENERALIZATION THROUGH MEMORIZATION: NEAREST NEIGHBOR LANGUAGE MODELS

Abatract 我们引入了kNN-LMs&#xff0c;它扩展了一个预先训练的神经语言模型&#xff08;LM&#xff09;&#xff0c;通过与k个最近邻&#xff08;kNN&#xff09;模型线性插值。最近邻是根据预先训练好的LM嵌入空间中的距离进行计算的&#xff0c;并可以从任何文本集合中提取…

45-命令行基础操作

45-命令行基础操作LInux命令行基础LInux命令基础知识Linux的Gul与CLI为什么使用Linux命令行Linux命令语法格式Linux命令分类LInux基础命令登录命令电源管理命令电源命令1: shutdown电源命令2: halt电源命令3: reboot文件管理命令Linux文件目录结构(1)Linux文件路径帮助命令目录…

Vue+Vite+TS

目录#、基础配置1、安装Node.js2、修改npm镜像源3、配置vscode一、创建项目二、Ref全家桶三、computed计算属性js中数组使用的高阶函数四、watch监听器#、基础配置 1、安装Node.js 下载地址&#xff1a;https://nodejs.org/zh-cn/download/ 安装成功&#xff0c;查看版本node …

vue create 创建项目的时候遇到使用nvm切换node后 提示‘vue‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

前景:我是用的是nvm切换的node版本&#xff0c;不是直接安装高级版本node,有nvm同样困惑的可以用以下方式解决问题&#xff0c;加油&#xff01;&#xff01;&#xff01; 报错: ‘vue’ 不是内部或外部命令,也不是可运行的程序 或批处理文件 解决方法: 1.检查node和npm nod…

libvirt 使用UEFI 设置 edk2-ovmf

一、ovmf 与 edk2 关系&#xff1a; 英特尔EFI开发工具包II (edk2)的子项目&#xff0c;所以在edk2 源码中也能找到 ovmf 部分&#xff0c;ovmf 使UEFI支持Ia32和X64虚拟机 二、OVMF_VARS.fd 与 OVMF_CODE.fd&#xff1a; 1、变量存储和固件的可执行文件&#xff1b; 2、OVMF_…