各位观众老爷，大家好！我是今天的讲师，咱们今天聊聊前端性能优化里头的“资源提示”三剑客：preload、preconnect、还有…别慌，prebaking 是我杜撰的，今天重点讲前两个，顺便扒一扒它们的小秘密。
开场白：性能优化的江湖，资源提示是门轻功
在前端性能优化的武林里，各种秘籍层出不穷，什么代码压缩、图片优化、懒加载等等，都是硬功夫。但今天我们要讲的资源提示，更像是一门轻功，能在关键时刻助你一臂之力，让你的网站跑得更快、更流畅。
第一回：preload – 资源预加载，料敌于先的王牌
preload 顾名思义，就是预先加载资源。想象一下，你是一位将军，知道敌军即将攻打某个要塞，提前就把粮草弹药运过去，等到敌人真的来了，你就能从容应战，而不是临时抱佛脚。
在浏览器眼里，资源就是粮草弹药。preload 告诉浏览器：“喂，老弟，这个资源很重要，待会肯定要用，你先偷偷下载好，别等我正式要用的时候才开始。”
1. preload 的语法：简单粗暴，一目了然
preload 的使用方式很简单，主要有两种：
-
HTML Link 标签：
<link rel="preload" href="styles.css" as="style"> <link rel="preload" href="script.js" as="script"> <link rel="preload" href="image.png" as="image"> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">rel="preload"：这是必须的，告诉浏览器这是一个预加载指令。href="资源URL"：指定要预加载的资源地址。as="资源类型"：这个非常重要！告诉浏览器你预加载的是什么类型的资源，浏览器才能正确处理。常见的类型有：script、style、image、font、fetch、document、audio、video等等。如果as属性不写或者写错，浏览器很可能不会预加载，或者加载了也不知道怎么用。type="MIME类型"：对于某些资源，比如字体，最好指定 MIME 类型，帮助浏览器更快地识别资源。crossorigin="anonymous"：如果资源是跨域的，并且需要使用 CORS，一定要加上crossorigin属性。字体资源通常都需要这个。
-
HTTP Link Header：
除了在 HTML 里写，你还可以通过 HTTP 响应头来设置
preload：Link: <styles.css>; rel=preload; as=style Link: <script.js>; rel=preload; as=script这种方式更灵活，可以在服务器端动态地控制哪些资源需要预加载。
2. preload 的适用场景：瞄准关键资源，一击必中
preload 并非万能，用得不好反而会适得其反。它最适合用来预加载以下这些关键资源：
- 首屏渲染所需的 CSS： 确保页面一开始就能看到漂亮的样式，而不是一片空白。
- 首屏渲染所需的 JavaScript： 避免 JavaScript 阻塞渲染。
- Web Fonts： 解决字体闪烁（FOUT/FOIT）问题。
- 关键图片： 首屏的关键图片，让用户第一时间看到。
- 异步加载的模块： 如果你知道某个模块在页面加载后很快就会用到，可以提前预加载。
3. preload 的注意事项：小心驶得万年船
- 不要过度使用： 预加载太多资源会导致带宽拥堵，反而降低性能。只预加载真正需要的资源。
- 确保资源可缓存： 预加载的资源应该设置合适的缓存策略，避免重复下载。
- 监控性能： 使用 Chrome DevTools 或 Lighthouse 等工具监控
preload的效果，确保它确实提升了性能。 as属性至关重要：as属性告诉浏览器资源的类型。 错误的as值可能会导致资源被以错误的优先级加载，甚至根本不加载。
4. preload 的代码示例：手把手教你用
假设我们有一个简单的 HTML 页面：
<!DOCTYPE html>
<html>
<head>
<title>Preload Example</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<img src="image.png" alt="Image">
</body>
</html>我们可以使用 preload 来优化这个页面：
<!DOCTYPE html>
<html>
<head>
<title>Preload Example</title>
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="image.png" as="image">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<img src="image.png" alt="Image">
</body>
</html>注意：
preload的link标签要放在实际使用的link和script标签之前。这样浏览器才能尽早开始预加载。- 即使使用了
preload，仍然需要保留原始的link和script标签。preload只是告诉浏览器提前下载资源，并不会自动应用资源。
第二回：preconnect – 建立连接，未雨绸缪的先锋
preconnect 的作用是预先建立与服务器的连接。 建立连接包括 DNS 解析、TCP 握手和 TLS 协商（如果是 HTTPS）。 这些过程都需要时间，如果等到真正需要请求资源时才开始建立连接，就会造成延迟。
preconnect 就像一位先锋，提前去敌人的营地打通道路，等你大部队来了，就可以直接冲过去，省去了开路的时间。
1. preconnect 的语法：简单易懂，方便快捷
preconnect 的使用方式也很简单，同样有两种：
-
HTML Link 标签：
<link rel="preconnect" href="https://example.com"> <link rel="preconnect" href="https://cdn.example.com" crossorigin>rel="preconnect"：这是必须的，告诉浏览器这是一个预连接指令。href="服务器地址"：指定要预连接的服务器地址。crossorigin：如果需要与服务器建立 CORS 连接，需要加上crossorigin属性。
-
HTTP Link Header：
Link: <https://example.com>; rel=preconnect Link: <https://cdn.example.com>; rel=preconnect; crossorigin
2. preconnect 的适用场景：瞄准第三方资源，事半功倍
preconnect 最适合用来预连接以下这些服务器：
- CDN： 如果你的网站使用了 CDN，预连接 CDN 可以加速资源加载。
- 第三方 API： 如果你的网站需要调用第三方 API，预连接 API 服务器可以减少 API 请求的延迟。
- 跨域资源： 加载跨域资源时，
preconnect可以减少建立连接的时间。
3. preconnect 的注意事项：适可而止，避免浪费
- 不要过度使用： 预连接太多服务器会占用资源，反而降低性能。只预连接真正需要的服务器。
- 考虑
dns-prefetch： 如果只需要进行 DNS 解析，可以使用dns-prefetch，它比preconnect更轻量级。 - 监控性能： 使用 Chrome DevTools 或 Lighthouse 等工具监控
preconnect的效果，确保它确实提升了性能。
4. preconnect 的代码示例：小试牛刀
假设我们的网站使用了 Google Fonts 和一个第三方 API：
<!DOCTYPE html>
<html>
<head>
<title>Preconnect Example</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph with Google Fonts.</p>
<button id="api-button">Call API</button>
<script>
const apiButton = document.getElementById('api-button');
apiButton.addEventListener('click', () => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
});
</script>
</body>
</html>我们可以使用 preconnect 来优化这个页面：
<!DOCTYPE html>
<html>
<head>
<title>Preconnect Example</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://api.example.com">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph with Google Fonts.</p>
<button id="api-button">Call API</button>
<script>
const apiButton = document.getElementById('api-button');
apiButton.addEventListener('click', () => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
});
</script>
</body>
</html>注意：
- Google Fonts 需要预连接
fonts.googleapis.com和fonts.gstatic.com两个域名。 fonts.gstatic.com需要加上crossorigin属性。
第三回：preload vs preconnect： 傻傻分不清楚？
很多同学容易把 preload 和 preconnect 搞混，觉得它们都是用来加速资源的，但其实它们的作用是不同的。
| 特性 | preload |
preconnect |
|---|---|---|
| 作用 | 预先下载资源 | 预先建立连接 |
| 对象 | 资源 (CSS, JavaScript, 图片, 字体等) | 服务器 |
| 目标 | 减少资源加载时间 | 减少建立连接的时间 |
| 适用场景 | 首屏渲染所需的关键资源 | CDN、第三方 API、跨域资源 |
| 是否执行资源 | 不会立即执行，需要配合 <link> 或 <script> |
不会加载任何资源，只是建立连接 |
| 优先级 | 根据资源类型而定 | 较低 |
简单来说，preload 是预先下载东西，preconnect 是预先修路。
第四回：进阶技巧：资源提示的更多玩法
除了 preload 和 preconnect，还有一些其他的资源提示技巧，可以进一步提升性能：
-
dns-prefetch： 只进行 DNS 解析，比preconnect更轻量级。适用于只需要解析域名，不需要建立完整连接的情况。<link rel="dns-prefetch" href="https://example.com"> -
modulepreload： 专门用于预加载 JavaScript 模块。<link rel="modulepreload" href="module.js" as="script"> -
Combine with HTTP/2 Push: HTTP/2 Push 允许服务器主动将资源推送给浏览器，而无需浏览器请求。 可以结合
preload使用，服务器根据preload指令推送资源。 （需要服务器支持）
第五回：总结：资源提示，优化利器
资源提示是一门很有用的前端性能优化技巧，可以有效地减少资源加载时间和建立连接的时间，提升用户体验。 但也要注意，不要过度使用，要根据实际情况选择合适的资源提示方式，并监控性能效果。
记住，优化没有银弹，需要不断地学习和实践，才能找到最适合自己的优化方案。
结尾：练好轻功，行走江湖
今天的讲座就到这里，希望大家能够掌握资源提示这门轻功，在前端性能优化的江湖里行走得更加潇洒自如！ 感谢各位的观看！