# 1. `font-display: swap;` —— 别再 “劫持” 文字渲染

字体漂亮；字体也会耍脾气。

自定义字体没加载完，浏览器就把文本空着 —— 用户看着一片空白，糟透了。只需一行 CSS，就能止损：

	@font-face {
	font-family: 'YourFont';
	src: url('YourFont.woff2') format('woff2');
	font-display: swap;
	}

含义是：先用系统字体把内容展示出来，等自定义字体准备好再替换。内容即刻可见，因此用户不流失。

# 2. `will-change` 减少绘制抖动

鼠标一悬停，按钮卡了一下？因为浏览器没提前准备。

给它个预告：

	.button:hover {
	will-change: transform, opacity;
	}

这等于提示浏览器：马上要动 transform 和 opacity ，请先分配显存。结果是：动画更顺滑、无顿挫。注意别滥用，否则内存会被占满。

# 3. `content-visibility` 懒渲染不可见区域

用户看不到的先别渲染 —— 可见即渲染更高效：

	.card {
	content-visibility: auto;
	}

元素即将进入视口时再绘制；因此首屏更快、内存更低。直白地说：别在客人没到时就把整桌菜都端上来。

# 4. 优先用 `transform/opacity` 而非定位属性做动画

想要 “黄油般顺滑”？别动 top/left/width/height ，它们会触发布局回流。

动这两位即可：

	.box {
	transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.box:hover {
	transform: translateY(-5px);
	opacity: 0.9;
	}

GPU 擅长做 transform/opacity ，CPU 可以省点力气；因此掉帧更少。

# 5. 使用 `prefers-reduced-motion`

你爱炫技动画，有人不喜欢。加上无障碍兜底，同时还能省绘制成本：

	@media (prefers-reduced-motion: reduce) {
	* {
	animation: none !important;
	transition: none !important;
	}
	}

这既可访问，又能减少不必要重绘。体验与性能双赢。

# 6. 内联关键 CSS（Critical CSS）

你的首页不需要上来就加载 2000 行样式。

在 <head> 里内联首屏所需的关键 CSS，剩下的异步加载。这更像策略而非语法，但策略永远胜过臃肿：首屏快、CLS 稳、用户不等。

# 7. 用 `rel="preload"` 预加载关键资源

严格来说是 HTML，但会直接影响 CSS 呈现路径。把首屏字体 / 背景图标记为优先：

<link rel="preload" href="/fonts/YourFont.woff2" as="font" type="font/woff2" crossorigin>

浏览器不是读心术；告诉它什么最重要，免得它先去抓无关脚本，把关键资源晾着。

# 8. 压缩与优化背景图

半数 “性能问题” 不在代码，而在图片过胖。

导出前先压缩；
background-size: cover; 要用得聪明；
能上 WebP/AVIF 就别上 JPEG。

3MB 的首图不是 “高质量”，而是累赘。因此，从源头控体重，胜过任何补救。

# 9. 骨架屏 > 菊花转

最能喊 “我很慢” 的，是加载转圈。最显 “我很快” 的，是骨架屏。

简单的 CSS 骨架 shimmer：

	s .skeleton {
	background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	}
	@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
	}

用户看到结构在填充，心理上更 “顺滑”。体感速度直线上升。

# 1. font-display: swap; —— 别再 “劫持” 文字渲染

# 2. will-change 减少绘制抖动

# 3. content-visibility 懒渲染不可见区域

# 4. 优先用 transform/opacity 而非定位属性做动画

# 5. 使用 prefers-reduced-motion