重复、或标签会触发多次加载与解析，真正优化是避免重复声明并复用已解析结果；同名CSS被多次引入将导致冗余CSSOM构建和请求，应确保全局CSS仅通过一个加载。
直接复用资源标签本身不会减少解析性能消耗——浏览器每次遇到 、<script></script> 或
重复
同一 CSS 文件被多个 标签引入（哪怕路径完全相同），浏览器仍会发起多次请求（除非强缓存命中），并分别解析生成 CSSOM，造成冗余计算和布局阻塞。
- 常见错误：组件库 + 主项目各自 import 同一份 reset.css，打包后生成两个
- 正确做法：确保全局 CSS 只通过一个
加载；组件内样式尽量用 CSS-in-JS 或 scoped（Vue）/ :host（Web Components）隔离 - 验证方式：打开 Chrome DevTools → Network → 看同名 CSS 是否出现多次请求，或 Elements 面板中检查
是否有重复
<script></script> 的 type="module" 自动去重但不共享执行上下文
多个 <script type="module" src="utils.js"></script> 标签会被浏览器自动 dedupe（只执行一次），但模块作用域仍是隔离的——这不算“复用”，只是避免重复执行。
- 真正复用逻辑应靠模块导入：
import { helper } from './utils.js'，而非反复声明<script src></script> - 注意：非模块脚本（
<script src></script>无 type 属性）不会去重，重复写两次就会执行两次 - 动态 import() 返回 Promise，也天然支持多次调用返回同一模块实例（规范保证）
图片/字体等资源用 srcset + 缓存策略代替多标签硬编码
为适配不同设备写一堆 
- 正确方式：单个
- 关键配套：服务器对图片设置强缓存（
Cache-Control: public, max-age=31536000），确保相同 URL 资源复用缓存 - 警惕：不要用 JS 动态创建多个
最易被忽略的一点：HTML 解析器对重复资源的“感知”仅限于 URL 字符串完全一致（含查询参数）。哪怕只是 ?v=1 和 ?v=2 的微小差异，浏览器就视为全新资源——既不复用缓存，也不复用解析结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
