1.系统偏好检测

@media (prefers-color-scheme: dark) { body { background: #121212; color: #fff; }}

2.手动切换主题

const toggle = document.querySelector('.theme-toggle');toggle.addEventListener('click', () => { document.body.classList.toggle('dark');});.dark { background: #121212; color: #fff; }.dark .border { border-color: #444; }

提供用户自主选择的权利。

3.动态颜色切换（CSS 变量）

:root { --primary: #4a90e2; }@media (prefers-color-scheme: dark) { :root { --primary: #f06; } }

通过变量统一管理主题色。

4.内联关键 CSS

<style> /* 首屏关键样式 */ .hero { background: #fff; padding: 2rem; }</style>

减少渲染阻塞，提升 FCP（First Contentful Paint）。

5.异步加载 CSS

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

非关键 CSS 异步加载，避免阻塞渲染。

6.内容可见性优化

.lazy { content-visibility: auto; contain-intrinsic-size: 1000px; }

延迟渲染屏幕外元素，提升长列表性能。

7.字体预加载

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

减少字体加载延迟，避免 FOIT（Flash of Invisible Text）。