常用的前端性能优化有哪些？

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

总结

前端性能优化是提升用户体验的关键，通过监控和优化核心Web指标，可以显著改善网站的加载速度和交互体验。

⚡

首屏加载时间

First Contentful Paint (FCP)

首次内容绘制时间，影响用户第一印象

👁️

白屏时间

Time to First Byte (TTFB)

服务器响应时间，页面开始加载的起点

🖱️

可交互时间

Time to Interactive (TTI)

页面完全可交互，用户能够正常操作

📊

最大内容绘制

Largest Contentful Paint (LCP)

最大元素渲染完成时间，衡量感知加载速度

📱

累计布局偏移

Cumulative Layout Shift (CLS)

视觉稳定性，避免页面元素意外移动

⚙️

首次输入延迟

First Input Delay (FID)

用户首次交互到浏览器响应的延迟时间

⚡减少请求数量：：
使用 CSS Sprites（适合小图标）
使用GraphQL，前端数据聚合
🏝️ 资源优化：
🏝️压缩：HTML/CSS/JS →打包工具自带Tree Shaking
📸 图片优化策略：
统一使用WebP格式，图片质量保持80%左右，在保证视觉效果的同时显著减少文件大小

🗜️ Gzip压缩机制：
浏览器与服务器协商压缩 → 浏览器请求头声明支持gzip → 服务器压缩响应内容 → 浏览器自动解压显示
gzip on;
⚡ 网站加载优化：：
按需加载：代码分割技术，把大的代码包拆分成多个小模块，用户根据需求加载对应代码、
懒加载、
分层加载：先快后好。先看到内容，再优化质量；1.首页缩略图，为图片生成缩略图
🎯 缓存策略：
浏览器缓存:配置web服务器的http缓存后配置，解决重复访问问题
CDN缓存：解决地理距离问题
Service Worker

🚀 常用的前端性能优化有哪些？