首屏加载优化总结

一、什么是首屏加载

  • 首屏时间(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 模型自动生成并整理,仅供学习与参考。

相关推荐
敲代码的嘎仔2 小时前
JavaWeb零基础学习Day1——HTML&CSS
java·开发语言·前端·css·学习·html·学习方法
Tachyon.xue4 小时前
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
前端·css·vue.js
FuckPatience5 小时前
Vue 中‘$‘符号含义
前端·javascript·vue.js
东风西巷7 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪8 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友10 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API11 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx12 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶12 小时前
webpack学习
前端·学习·webpack