首屏加载优化总结

一、什么是首屏加载

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

计算方式

  1. 监听 DOMContentLoaded

    javascript 复制代码
    document.addEventListener('DOMContentLoaded', () => {
        console.log('first contentful painting');
    });
  2. Performance API

    ini 复制代码
    performance.getEntriesByName("first-contentful-paint")[0].startTime;

二、加载慢的常见原因

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

三、常见优化方案

1. 减小入口文件体积

  • 路由懒加载:拆分路由对应组件,按需加载

    css 复制代码
    routes:[ 
        {
          path: 'Blogs',
          component: () => import('./components/ShowBlogs.vue')
        }
    ]

2. 静态资源缓存

  • HTTP 缓存Cache-ControlEtagLast-Modified
  • Service Worker:离线缓存
  • localStorage:存储部分数据

3. UI 框架按需引入

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

    css 复制代码
    import { Button, Input, Pagination } from 'element-ui';
    Vue.use(Button).use(Input).use(Pagination);

4. 公共依赖抽取

  • 使用 webpack SplitChunksminChunks

    arduino 复制代码
    minChunks: 3 // 使用 3 次以上抽取为公共依赖

5. 图片优化

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

6. 开启 GZip 压缩

  • 前端构建时使用 compression-webpack-plugin

  • 服务端启用 gzip(express 示例):

    php 复制代码
    const compression = require('compression')
    app.use(compression())

7. 使用 SSR

  • SSR(服务端渲染) :服务器直接返回 HTML
  • Vue 推荐 Nuxt.js 实现 SSR,显著提升首屏速度

四、优化整体思路

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

五、参考资料


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

相关推荐
β添砖java15 分钟前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长6 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅7 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_7 小时前
Chrome开发者工具
前端·chrome
YiHanXii7 小时前
this 输出题
前端·javascript·1024程序员节
楊无好7 小时前
React中ref
前端·react.js
程琬清君7 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1007 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节