一、什么是首屏加载
- 首屏时间(First Contentful Paint,FCP) :浏览器从输入网址到 首屏内容渲染完成 的时间。
- 不需要整个网页都渲染完,但首屏区域必须显示内容。
- 重要性:是衡量用户体验最关键的性能指标之一。
计算方式
-
监听 DOMContentLoaded
javascriptdocument.addEventListener('DOMContentLoaded', () => { console.log('first contentful painting'); });
-
Performance API
iniperformance.getEntriesByName("first-contentful-paint")[0].startTime;
二、加载慢的常见原因
- 网络延时(跨域/弱网环境)
- 资源体积过大(JS、CSS、图片)
- 资源重复请求(缓存缺失,依赖打包不合理)
- JS 脚本阻塞渲染(未使用 async/defer)
三、常见优化方案
1. 减小入口文件体积
-
路由懒加载:拆分路由对应组件,按需加载
cssroutes:[ { path: 'Blogs', component: () => import('./components/ShowBlogs.vue') } ]
2. 静态资源缓存
- HTTP 缓存 :
Cache-Control
、Etag
、Last-Modified
- Service Worker:离线缓存
- localStorage:存储部分数据
3. UI 框架按需引入
-
避免全量引入 UI 库,改为按需加载组件
cssimport { Button, Input, Pagination } from 'element-ui'; Vue.use(Button).use(Input).use(Pagination);
4. 公共依赖抽取
-
使用 webpack SplitChunks 或
minChunks
arduinominChunks: 3 // 使用 3 次以上抽取为公共依赖
5. 图片优化
- 图片压缩(tinypng、image-webpack-loader)
- 使用字体图标/雪碧图
- 优先考虑 WebP 格式
6. 开启 GZip 压缩
-
前端构建时使用
compression-webpack-plugin
-
服务端启用 gzip(express 示例):
phpconst compression = require('compression') app.use(compression())
7. 使用 SSR
- SSR(服务端渲染) :服务器直接返回 HTML
- Vue 推荐 Nuxt.js 实现 SSR,显著提升首屏速度
四、优化整体思路
- 资源加载优化:拆分入口、缓存、压缩、依赖抽取、GZip
- 页面渲染优化:SSR、懒加载、UI 框架按需加载、减少阻塞
五、参考资料
🤖 AI 生成提示:本文由 AI 模型自动生成并整理,仅供学习与参考。