性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s

<link> 标签玩出花,让首屏快、下一跳更快,还省 DNS 时间。

全文没有废话,直接给「能复制」的代码和「能量化」的对比数据。


一、为什么要关心这"三兄弟"

指标 未优化 优化后(示例数据)
FCP(首屏) 1.8 s 1.2 s ⬇33%
下一跳 JS 加载 350 ms 0 ms(disk cache)
CDN 域名解析 210 ms 95 ms ⬇54%

成本 :只加几行 HTML,0 业务逻辑改动,不升级框架、不花钱买 CDN 流量


二、能力矩阵(先收藏,再对照)

特性 作用对象 优先级 生命周期 典型场景
preload 当前页关键子资源 高(与 CSS/JS 并行) 当前 Tab 字体、首屏大图、关键脚本
prefetch 下一跳页面/资源 最低(浏览器空闲) 5 min disk cache 列表→详情、路由懒加载、WebAssembly
dns-prefetch 跨域域名 仅 DNS 20-120 ms 节省 第三方 CDN、统计、API 网关

一句话口诀:
首屏要命用 preload,下一跳用 prefetch,跨域先 dns-prefetch。


三、实战 1:字体白屏------preload 直接插队

问题

自定义字体写在 CSS 里,浏览器要等 CSS 下载完才发现字体,再发请求 → FCP 被拖慢。

解决

把字体请求提前到 HTML,让字体与 CSS 并行加载。

html 复制代码
<!-- index.html <head> 顶部 -->
<link rel="preload"
      href="/fonts/AlibabaPuHui-3.0-Bold-subset.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

注意

as="font" 必写,否则浏览器不知道优先级;

② 字体必须加 crossorigin,否则会重复下载

效果

本地 4G 慢网(Chrome DevTools 3 次平均):
FCP 从 1.8 s → 1.2 s,直接砍 33%


四、实战 2:列表→详情,提前把 JS 偷回来

技术栈

Vue3 + Vite + Vue-Router 懒加载(Webpack 同理)。

目标

用户在列表页停留 >300 ms 就把详情页脚本 prefetch 进磁盘缓存。

步骤

  1. 路由文件加魔法注释
js 复制代码
// router.js
const ProductDetail = () => import(
  /* webpackChunkName: "product-detail" */
  /* webpackPrefetch: true */   // 关键行
  '@/views/ProductDetail.vue'
)
  1. 构建后自动插入(无需手写)
html 复制代码
<link rel="prefetch" href="/js/product-detail.17aa7b89.js">
  1. 验证
    列表页→Network→Priority: Lowest →闲时下载;
    点击进入详情→JS size=0 ms(from disk cache),首屏秒出。

踩坑提醒

不要把首屏脚本也 webpackPrefetch:true,会抢带宽,反而拖慢主流程。


五、实战 3:CDN 域名提前解析------省 100 ms DNS

背景

主站 www.xxx.com,静态资源在 static.xxxcdn.com;海外用户 DNS 延迟高。

代码

在入口 HTML 最顶部(任何资源之前):

html 复制代码
<head>
  <meta charset="utf-8">
  <!-- 1. 先解析 CDN 域名 -->
  <link rel="dns-prefetch" href="//static.xxxcdn.com">
  <!-- 2. HTTPS 可再激进一点,直接预连 -->
  <link rel="preconnect" href="//static.xxxcdn.com" crossorigin>
</head>

线上数据 (WebPageTest 北美节点):

DNS Time 从 210 ms → 95 ms

后续所有 static.xxxcdn.com 资源整体左移 ≈110 ms


六、常见踩坑清单(血泪总结)

  1. preload 不写 as → 浏览器当普通 HTML 下载,优先级丢失
  2. 字体 preload 漏 crossorigin重复下载,流量 double。
  3. 把首屏大图也 prefetch → 闲时带宽被占,FCP 反而涨
  4. dns-prefetch 写同域 → 毫无效果,还浪费解析线程。
  5. 弱网环境 prefetch 命中率低,且 Cache-Control: no-cache直接浪费流量,需评估。

七、一条命令验证效果

bash 复制代码
# 本地起静态服务器,模拟慢网
npx http-server dist -p 8080 -d 200  # 200ms 延迟

Chrome DevTools → Network →

  • Priority 列:preload 资源显示 High ;prefetch 显示 Lowest
  • Size 列:prefetch 资源第二次访问显示 (disk cache)

八、速查表(复制即可用)

html 复制代码
<!-- 1. 首屏关键字体 -->
<link rel="preload" href="/fonts/xx.woff2" as="font" type="font/woff2" crossorigin>

<!-- 2. 列表→详情(Webpack/Vite 魔法注释自动生成,无需手写) -->

<!-- 3. 第三方 CDN / 统计域名 -->
<link rel="dns-prefetch" href="//static.xxxcdn.com">
<link rel="preconnect" href="//static.xxxcdn.com" crossorigin>

九、结语

性能优化 ≠ 大刀阔斧重构,几行 <link> 就能换 30% 的 FCP 提升

下次评审再被挑战"首屏慢",直接把这篇甩给他------复制、粘贴、测一遍,立省 100 ms

如果帮到你,点个「赞」再走;

想深挖更多"零成本"优化,留言告诉我!

相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇3 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15884 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪5 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长5 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH5 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴5 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30735 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构