资源提示关键词

preload vs. defer/async vs. prefetch

1. preload: 用来提前加载页面需要的关键资源（如 CSS、JavaScript、图片、字体等）。它不会影响资源的执行顺序，只是让浏览器尽早地加载这些资源。适用于必须尽早加载并在页面加载中立即使用的资源。

<link rel="preload" href="important-script.js" as="script">

2. defer: 是用于 <script> 标签中，表示脚本会在 HTML 解析完成后执行。它不会阻塞页面的渲染，因此提高了页面的加载速度。适用于需要在页面加载完成后再执行的脚本。

<script src="script.js" defer></script>

3. async: 属性也用于 <script> 标签中，表示脚本会异步加载和执行，不会阻塞页面的渲染。不同的是，async 的脚本会在下载完成后立即执行，这可能会打乱执行顺序，因此不适用于需要按顺序执行的脚本。

<script src="script.js" async></script>

4. prefetch: 用于告诉浏览器预加载页面未来可能需要的资源。它的作用是提前为未来的页面或内容做好准备，通常用于用户即将访问的页面资源。它与 preload 不同的是，prefetch 资源的优先级较低，通常在空闲时加载。

<link rel="prefetch" href="next-page.js">

rel='dns-prefetch' 用于告诉浏览器预加载 DNS 解析的结果。它的作用是提前为未来的域名做好准备，通常用于用户即将访问的域名资源。

5. prerender：类似prefetch但它会在后台渲染整个页面
6. preconnect：用于告诉浏览器预连接到未来可能需要的资源。预先建立链接（节约DNS/TCL/TLS的时间）