首屏加载优化总结

一、什么是首屏加载

• 首屏时间（First Contentful Paint，FCP） ：浏览器从输入网址到 首屏内容渲染完成 的时间。
• 不需要整个网页都渲染完，但首屏区域必须显示内容。
• 重要性：是衡量用户体验最关键的性能指标之一。

计算方式

1. 监听 DOMContentLoaded

1document.addEventListener('DOMContentLoaded', () => {  
2    console.log('first contentful painting');  
3});  

2. Performance API

1performance.getEntriesByName("first-contentful-paint")[0].startTime;  

二、加载慢的常见原因

1. 网络延时（跨域/弱网环境）
2. 资源体积过大（JS、CSS、图片）
3. 资源重复请求（缓存缺失，依赖打包不合理）
4. JS 脚本阻塞渲染（未使用 async/defer）

三、常见优化方案

1. 减小入口文件体积

• 路由懒加载：拆分路由对应组件，按需加载

1routes:[  
2    {  
3      path: 'Blogs',  
4      component: () => import('./components/ShowBlogs.vue')  
5    }  
6]  

2. 静态资源缓存

• HTTP 缓存：Cache-Control、Etag、Last-Modified
• Service Worker：离线缓存
• localStorage：存储部分数据

3. UI 框架按需引入

• 避免全量引入 UI 库，改为按需加载组件

1import { Button, Input, Pagination } from 'element-ui';  
2Vue.use(Button).use(Input).use(Pagination);  

4. 公共依赖抽取

• 使用 webpack SplitChunks 或 minChunks

1minChunks: 3 // 使用 3 次以上抽取为公共依赖  

5. 图片优化

• 图片压缩（tinypng、image-webpack-loader）
• 使用字体图标/雪碧图
• 优先考虑 WebP 格式

6. 开启 GZip 压缩

• 前端构建时使用 compression-webpack-plugin
• 服务端启用 gzip（express 示例）：

1const compression = require('compression')  
2app.use(compression())  

7. 使用 SSR

• SSR（服务端渲染） ：服务器直接返回 HTML
• Vue 推荐 Nuxt.js 实现 SSR，显著提升首屏速度

四、优化整体思路

• 资源加载优化：拆分入口、缓存、压缩、依赖抽取、GZip
• 页面渲染优化：SSR、懒加载、UI 框架按需加载、减少阻塞

五、参考资料

• 知乎：前端首屏优化
• 浏览器工作原理
• 掘金：首屏优化总结
• Vue3 中文文档

🤖 AI 生成提示：本文由 AI 模型自动生成并整理，仅供学习与参考。

《首屏加载优化总结》 是转载文章，点击查看原文。