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