咳咳，各位同学，大家好！ 今天咱们开堂授课，聊聊前端性能优化里的几大法宝：Critical CSS、Preload/Preconnect/Prefetch，以及它们如何跟 JavaScript 资源勾搭，提升加载速度。 坐稳扶好，准备起飞！
一、Critical CSS：让页面“先睹为快”的秘密武器
想象一下，你去餐厅吃饭，服务员先给你上了几道开胃小菜，让你不至于饿着肚子干等。Critical CSS 的作用就类似于这些开胃菜。
1. 什么是 Critical CSS？
Critical CSS (也称为 Above-the-Fold CSS) 指的是渲染首屏内容所需的 CSS 样式。 简单来说，就是用户打开页面时，在无需滚动的情况下就能看到的内容所需要的 CSS。
2. 为什么需要 Critical CSS？
浏览器渲染页面时，会遇到一个“阻塞渲染”的问题。 浏览器需要先下载并解析 CSS，才能开始渲染页面。 如果 CSS 文件太大，下载时间过长，用户就会看到一片空白，体验非常糟糕。
Critical CSS 的目的就是解决这个问题。 我们可以将渲染首屏所需的 CSS 样式提取出来，直接内联到 HTML 中。 这样，浏览器在下载完整 CSS 文件之前，就能先用内联的 Critical CSS 渲染首屏内容，让用户“先睹为快”。
3. 如何生成 Critical CSS？
生成 Critical CSS 的方法有很多，最常用的就是使用工具。 比较流行的工具有：
- Critical: 一个 Node.js 模块，可以从 HTML 文件中提取 Critical CSS。
- Penthouse: 另一个 Node.js 模块，功能类似 Critical，但性能更好。
- 在线工具: 网上有很多在线 Critical CSS 生成器，可以直接输入网址生成。
4. Critical CSS 的使用方法
假设我们有一个 HTML 文件 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
</header>
<main>
<p>这是我的网站的内容。</p>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
<script src="script.js"></script>
</body>
</html>假设 style.css 包含了所有 CSS 样式，包括首屏和非首屏的。 现在，我们使用 Critical 工具生成 Critical CSS，并将其内联到 HTML 中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<style>
/* 这里是 Critical CSS 的内容 */
header {
background-color: #f0f0f0;
padding: 20px;
}
nav a {
margin-right: 10px;
}
</style>
<link rel="stylesheet" href="style.css" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
</header>
<main>
<p>这是我的网站的内容。</p>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
<script src="script.js"></script>
</body>
</html>注意：
- 我们将 Critical CSS 内联到
<style>标签中。 - 我们使用
onload="if(media!='all')media='all'"属性和<noscript>标签，确保完整 CSS 文件在 Critical CSS 加载完成后加载。 这样，即使 JavaScript 被禁用，页面也能正常显示。
5. Critical CSS 的优缺点
| 优点 | 缺点 |
|---|---|
| 提升首屏渲染速度，改善用户体验 | 增加了 HTML 文件的大小 |
| 减少了 HTTP 请求数量 | 需要定期更新 Critical CSS，以保持与完整 CSS 文件同步 |
| 适用于首屏内容比较固定的页面 | 对于首屏内容变化频繁的页面，维护成本较高 |
二、Preload/Preconnect/Prefetch：资源加载的“加速器”
除了 Critical CSS，我们还可以使用 Preload、Preconnect 和 Prefetch 等资源提示，来优化资源加载。 它们就像是资源加载的“加速器”，可以提前告诉浏览器我们需要哪些资源，让浏览器提前下载或建立连接，从而提升加载速度。
1. Preload：提前“预加载”关键资源
- 作用: 告诉浏览器提前下载当前页面需要的关键资源，例如 CSS、JavaScript、字体、图片等。
- 用法:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="image.png" as="image">-
属性:
href: 资源的 URL。as: 资源的类型 (style, script, font, image, etc.)。 务必指定正确的as属性，否则浏览器可能不会正确加载资源。type: 资源的 MIME 类型 (例如font/woff2,image/png)。crossorigin: 如果资源来自不同的域名，需要添加crossorigin属性。
-
适用场景:
- 延迟加载的 CSS 或 JavaScript 文件。
- 字体文件。
- 背景图片。
- 任何对首屏渲染至关重要的资源。
2. Preconnect：提前“建立连接”
- 作用: 告诉浏览器提前与指定的域名建立连接。 建立连接包括 DNS 查询、TCP 握手和 TLS 协商等过程，这些过程都需要时间。 通过 Preconnect，我们可以提前完成这些过程，减少资源加载的延迟。
- 用法:
<link rel="preconnect" href="https://example.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>-
属性:
href: 域名。crossorigin: 如果需要跨域请求资源，需要添加crossorigin属性。
-
适用场景:
- 从 CDN 加载资源的域名。
- API 请求的域名。
- 任何需要与外部域名建立连接的场景。
3. Prefetch：提前“预取”未来资源
- 作用: 告诉浏览器提前下载未来页面可能需要的资源。 这些资源可能在当前页面不需要，但在用户跳转到其他页面时会用到。
- 用法:
<link rel="prefetch" href="next-page.html">
<link rel="prefetch" href="image.png">-
属性:
href: 资源的 URL。
-
适用场景:
- 用户可能跳转到的下一个页面。
- 用户可能下载的文件。
- 任何未来可能需要的资源。
4. Preload, Preconnect, Prefetch 对比
| 特性 | Preload | Preconnect | Prefetch |
|---|---|---|---|
| 目的 | 预加载当前页面需要的关键资源 | 预先建立连接 | 预取未来页面可能需要的资源 |
| 优先级 | 高 | 中 | 低 |
| 适用场景 | 延迟加载的 CSS/JS, 字体, 图片等 | CDN, API 请求域名等 | 下一个页面, 可能下载的文件等 |
| 是否阻塞渲染 | 是 (如果资源是渲染阻塞的) | 否 | 否 |
| 浏览器支持 | 较好，但部分老版本浏览器不支持 | 较好，但部分老版本浏览器不支持 | 较好，但部分老版本浏览器不支持 |
三、 JavaScript 资源优化：三剑客如何发力？
现在，让我们看看 Critical CSS、Preload/Preconnect/Prefetch 如何与 JavaScript 资源协作，提升加载速度。
1. Critical CSS + JavaScript
如果你的 JavaScript 代码依赖于某些 CSS 样式，那么 Critical CSS 可以帮助你更快地加载这些样式，从而让 JavaScript 代码更快地执行。
例如，假设你的 JavaScript 代码需要获取某个元素的宽度，而这个元素的宽度是由 CSS 样式决定的。 如果 CSS 样式加载缓慢，那么 JavaScript 代码就无法正确获取元素的宽度，可能会导致错误。
通过使用 Critical CSS，我们可以确保首屏所需的 CSS 样式尽快加载，从而让 JavaScript 代码能够正确执行。
2. Preload + JavaScript
Preload 可以用来提前加载延迟加载的 JavaScript 文件。 例如，你可以使用 import() 语法动态加载 JavaScript 模块，或者使用第三方库来实现懒加载。
<link rel="preload" href="module.js" as="script">
<script>
// 在需要的时候加载模块
import('./module.js')
.then(module => {
// 使用模块
module.init();
})
.catch(error => {
console.error('加载模块失败', error);
});
</script>通过使用 Preload，我们可以提前下载 module.js 文件，从而减少动态加载的延迟。
3. Preconnect + JavaScript
如果你的 JavaScript 代码需要从外部域名加载数据，例如通过 API 请求，那么 Preconnect 可以帮助你提前与 API 服务器建立连接。
<link rel="preconnect" href="https://api.example.com">
<script>
// 发送 API 请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// 处理数据
console.log(data);
})
.catch(error => {
console.error('API 请求失败', error);
});
</script>通过使用 Preconnect，我们可以减少 API 请求的延迟，从而提升 JavaScript 代码的执行速度。
4. 优化第三方 JavaScript 库
很多网站都会使用第三方 JavaScript 库，例如 jQuery、React、Vue 等。 这些库通常体积较大，加载时间较长，可能会影响页面性能。
我们可以通过以下方法来优化第三方 JavaScript 库的加载：
- 使用 CDN: 使用 CDN 可以利用 CDN 节点的缓存，减少加载延迟。
- 延迟加载: 将不必要的第三方库延迟加载，只在需要的时候加载。
- 代码分割: 将第三方库的代码分割成多个小文件，只加载当前页面需要的代码。
- 使用 Preload: 使用 Preload 提前加载第三方库的文件。
5. 示例代码：综合运用
假设我们有一个页面，需要加载一个名为 app.js 的 JavaScript 文件，这个文件依赖于一个名为 style.css 的 CSS 文件，并且需要从 https://api.example.com 发送 API 请求。
我们可以使用 Critical CSS、Preload 和 Preconnect 来优化加载：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的页面</title>
<style>
/* Critical CSS */
body {
font-family: sans-serif;
}
</style>
<link rel="preload" href="style.css" as="style" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
<link rel="preload" href="app.js" as="script">
<link rel="preconnect" href="https://api.example.com">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>在这个例子中，我们：
- 将 Critical CSS 内联到 HTML 中。
- 使用 Preload 提前加载
style.css和app.js文件。 - 使用 Preconnect 提前与
https://api.example.com建立连接。
这样，我们就可以最大限度地提升页面的加载速度，改善用户体验。
四、 注意事项与最佳实践
- 测量性能: 在应用任何优化之前，务必先测量页面的性能。 使用工具 (例如 Chrome DevTools, Lighthouse) 来分析性能瓶颈，并确定哪些优化措施最有效。
- 测试: 在生产环境中部署优化之前，务必进行充分的测试，确保优化不会引入新的问题。
- 适度优化: 不要过度优化。 过度优化可能会导致代码复杂性增加，维护成本升高，甚至适得其反。
- 关注指标: 关注关键性能指标 (例如 First Contentful Paint, Largest Contentful Paint, Time to Interactive)，并根据指标的变化来调整优化策略。
- 浏览器兼容性: 确保你的优化措施在不同的浏览器和设备上都能正常工作。
五、总结
今天我们学习了 Critical CSS、Preload/Preconnect/Prefetch 这三个性能优化利器，以及它们如何与 JavaScript 资源配合，提升页面加载速度。 记住，性能优化是一个持续的过程，需要不断地学习和实践。 希望大家能够将这些知识应用到实际项目中，打造更快速、更流畅的 Web 应用！
下课！ 祝大家早日成为前端性能优化大师！