是最直接轻量的JS加载优化方式，用于提前下载首屏必需资源（如critical.css、app-init.js、关键字体和hero图），需规范设置as、crossorigin等属性，且不替代原始引用。
用 提前下载首屏真正需要的资源，是最直接、最轻量的 JavaScript 加载优化方式。它不改变代码结构，也不依赖构建工具，只在 HTML 层面告诉浏览器：“这些资源现在就要下，别等解析完再找”。
哪些资源该预加载
只预加载影响首屏渲染或交互立即可用的关键资源：
- 首屏必需的 CSS（如
critical.css），避免渲染阻塞 - 初始化逻辑的核心 JS（如
app-init.js或路由入口脚本） - 首屏用到的 Web 字体（如
Pacifico.woff2），必须加crossorigin="anonymous" - 关键 hero 图（
as="image"），可配合fetchpriority="high"进一步提权
不要预加载整包 bundle.js、非首屏组件、懒加载模块或第三方分析脚本——它们不属于“当前页面立刻需要”的范畴。
写法必须规范，否则静默失效
as 属性必不可少，它让浏览器知道资源类型和加载优先级；跨域字体还必须带 crossorigin：
注意：href 的路径需与后续实际引用完全一致（含大小写、斜杠、查询参数），否则浏览器无法复用，会重复下载。
预加载只是下载，不替代原始引用
preload 只负责“提前拿过来”，不负责“用起来”。所以仍要保留原来的引入方式：
- CSS 继续写：
- JS 继续写：
<script src="app-init.js"></script>或<script type="module" src="app-init.js"></script>
浏览器会自动复用已预加载的资源，不会发起第二次请求。
动态路径场景用 JS 插入
当资源路径由运行时决定（如多语言、设备适配），可在 内尽早执行 JS 动态创建：
- 创建
link元素，设rel="preload"、as、href - 立即 append 到
document.head - 可监听
load事件做后续处理，但注意：它只表示下载完成，不保证执行时机
示例：
<script><br> const link = document.createElement('link');<br> link.rel = 'preload';<br> link.as = 'script';<br> link.href = '/js/app-init-' + navigator.language + '.js';<br> document.head.appendChild(link);<br> </script>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
