在现代前端开发中，提升网页首屏加载速度和用户体验是非常重要的目标。本文将介绍三个简单但高效的优化技巧。

一、CSS media="print" 异步加载法

原理

通常，浏览器在遇到 <link rel="stylesheet" href="..."> 时，会阻塞页面渲染，直到 CSS 下载并解析完毕。这样虽然保证了样式的完整性，但会拖慢首屏内容的显示。

通过设置 media="print"，浏览器会认为这份 CSS 只在打印时才需要，因此不会阻塞页面渲染，而是异步下载。等 CSS 下载完成后，再通过 onload 事件把 media 改回 all，样式立即应用到页面。

示例代码

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

适用场景

  • 第三方样式库（如字体、动画、组件库等）
  • 非关键样式（不影响首屏布局和内容的 CSS），关键样式建议仍同步加载，避免页面“无样式”闪烁。

二、JavaScript 的 defer 属性

原理

默认情况下，浏览器遇到 <script src="..."> 会阻塞 HTML 解析，直到脚本下载并执行完毕。这样会影响页面内容的及时显示。

加上 defer 属性后，脚本会在 HTML 解析完成后再执行，不会阻塞页面渲染。适合页面功能性脚本、第三方库等。

示例代码

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

适用场景

  • 绝大多数页面 JS（如交互、动画、第三方库等）
  • 只要不是必须在 <head> 立即执行的脚本，都推荐加 defer

注意事项

  • defer 只对外部脚本有效（即有 src 的 <script>）

和async的关系

  1. async
  • 下载：脚本会并行下载（不阻塞 HTML 解析）。
  • 执行：一旦下载完成，立刻执行（哪怕 HTML 还没解析完）。
  • 执行顺序：多个 async 脚本互相独立，谁先下载完谁先执行，顺序不确定。
  1. defer
  • 下载：脚本也会并行下载（不阻塞 HTML 解析）。
  • 执行：等到 HTML 解析完成（DOMContentLoaded 之前）再顺序执行。
  • 执行顺序：按 HTML 中的先后顺序执行。

三、@font-face 的 url 加载

有些语言可能会有很大的字符集，例如中文，这个时候，一个支持较完善的字体文件可能会到达 30 MB（例如本站使用的 Sarasa Gothic）。如果直接在 <head> 里写style，浏览器会在解析 CSS 时立刻发起下载请求，这不仅可能阻塞首屏文字的渲染（导致一段时间“空白”），而且网络压力大时 UX 也会极差。如果你是用的link，那么可以使用上面的hack，或者可以使用兼容性更好（Safari除外）的

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

如果你用的是@font-face那就另当别论了，可以用这个方法：

font-display: swap

例如：

@font-face {
  font-family: 'Sarasa Gothic';
  src: url('/fonts/sarasa-gothic.woff2') format('woff2');
  font-display: swap;
}

这里font-face的swap属性代表先用回退字体渲染，等字体加载好再替换，避免“白屏文字缺失”(FOIT)。同时也可以采用fallback / optional：让浏览器在网络差时甚至可以放弃加载字体，加快首屏。

当然，如果你想严格控制字体加载时间，可以尝试 Font Loading API，不过在这不过多介绍。

document.fonts.load("1em Sarasa").then(() => {
  document.documentElement.classList.add("font-loaded");
});

以上代码可以让页面先用系统字体渲染，等字体真正加载好后，再切换 CSS class 应用自定义字体。还可以自定义“加载中”的占位体验。

参考资料

标签：无

2 条评论

  1. sfgzglswgi sfgzglswgi

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发，新的一年，只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘（纯干货）coinsrore.com
    新车上路，只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户！！！coinsrore.com
    新项目准备上线，寻找志同道合的合作伙伴coinsrore.com
    新车即将上线 真正的项目，期待你的参与coinsrore.com
    新盘新项目，不再等待，现在就是最佳上车机会！coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹！coinsrore.com

    回复
  2. auwbgqavqj auwbgqavqj

    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹！coinsrore.com

    回复
取消回复
你的评论