页面加载优化及方案
一、 页面加载慢
问题可能原因:
- 资源体积过大(图片、CSS、JS等)
- 服务器响应慢
- 获取图片网络请求过多
解决方案:
- 图片优化:使用WebP格式,压缩图片,懒加载(Lazy Load)
- 资源压缩:启用Gzip压缩,精简CSS、JS【已应用至项目中】
- 减少请求:图片资源地址无需请求,直接取值渲染
二、首屏渲染慢
问题可能原因:
- 渲染内容较多
解决方案:
- 代码审查,减少DOM复杂度:减少不必要的DOM节点,提高渲染效率
- 骨架屏加载:在数据加载前显示骨架屏,提高感知速度
三、FCP(First Contentful Paint)慢
问题可能原因:
- 字体加载阻塞
- CSS 过大
- 服务器响应慢
解决方案:
- 字体优化:使用系统字体或 font-display: swap
- 关键 CSS 提前加载:提取关键 CSS 直接写入 HTML
- 服务端渲染(SSR)或静态生成(SSG):减少前端计算
四、LCP(Largest Contentful Paint)慢
问题可能原因:
- 大图加载慢
- 关键资源未优先加载
解决方案:
- 图片优化:使用CDN、WebP、懒加载
- 预加载关键资源: 提前加载核心内容
五、TBT(Total Blocking Time)过高
问题可能原因:
- JS 任务执行过长
- 过多的同步任务
- 多个地方调用类似的代码,导致代码冗余
解决方案:
- JS 代码审查:
- 提取公共函数,提高复用率
- 封装通用组件
- 减少重排和重绘:避免频繁操作 DOM
- 异步加载 JS:避免主线程被 JS 阻塞