link标签
preload
- 资源在当前页面使用
- 会优先加载
// 浏览器在解析 HTML 的早期发现此标签，立即以高优先级请求 `other.js`，
// 但仅下载到缓存，不执行任何代码
<link rel='preload' href='other.css' as='style' />
<link rel='preload' href='other.js' as='script' />
// 不会再下载了,直接去缓存里读取
<link rel='stylesheet' href='other.css' />
<script src="other.js" defer></script>
prefetch
- 资源在未来页面使用
- 空闲时加载
// 空闲时下载
<link rel='prefetch' href='other.css' as='style' />
<link rel='prefetch' href='other.js' as='script' />
// 未来页面加载时, 使用上面下载好的
<link rel='stylesheet' href='other.css' />
<script src="other.js" defer></script>
dns-prefetch
- dns 预解析
- 就是提前将域名解析成ip地址, 从而节省时间
- 浏览器在解析HTML时，会在后台异步发起DNS查询，将域名
abc.com解析为对应的IP地址，并缓存结果 - 当页面后续实际请求
abc.com的资源（如脚本、图片）时，直接使用缓存的IP地址，跳过DNS解析步骤（通常耗时20~120ms)
<link rel='dns-prefetch' href='https://abc.com'>
preconnect
-
浏览器在解析到该标签时，会提前建立与
abc.com服务器的连接，包括：- DNS解析：将域名转换为IP地址（通常耗时20~120ms）
- TCP握手：建立与服务器的网络连接（通常需1~2个RTT时间）。
- TLS协商（若为HTTPS）：加密握手过程（通常需额外1~2个RTT时间）
-
当页面后续实际请求
abc.com的资源（如脚本、字体、API数据）时，跳过连接建立阶段，直接复用已建立的连接，显著降低延迟。
<link rel='preconnect' href='https://abc.com' crossorign>
script标签
方案1: 异步下载
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOMContentLoaded');
});
// 或者
window.addEventListener('load', (event) => {
console.log('loaded');
});
方案2: async
- 解析html时, 遇到js,
- 一边解析html, 一边下载js
- 等到js下载完成后, 立即执行js, 此时html会停止解析
<script src="/1.async1.js?wait=3000" async></script>
方案3: defter
- 解析html时, 遇到js,
- 一边解析html, 一边下载js
- 等到html解析完成后, 执行js
<script src="/1.async1.js?wait=3000" defer></script>
