概述
前端性能优化主要从加载性能和渲染性能两个方面去优化。
性能指标
几个基本概念
- FCP
First Contentful Paint 首次内容绘制，即白屏时间，页面有了第一个内容开始绘制
- LCP
Largest Contentful Paint 最大内容绘制，即当页面的所有内容都已显示时。
- CLS
Cumulative Layout Shift 加载时页面元素移动了多少。
- FID
First Input Delay 页面对用户的第一次交互做出反应的时间。
性能测试
- https://www.webpagetest.org/
- https://web.dev/measure/
- PageSpeedInsights
- Search Console
- Chrome User Experience Report
优化加载性能
缓存 -> 发送请求 -> 等待响应 -> 解析 -> 处理各类静态资源 -> 运行时 -> 预加载（等待后续的请求）
主要思路是压缩资源，提高传输速度
-
静态资源压缩，精灵图
-
图片、路由懒加载 预加载
-
强制缓存和协商缓存
-
压缩图片、css、js
-
cdn、oss
-
做缓存
-
Gzip压缩
优化渲染性能
-
CSS：基于CSS规则
-
DOM：基于DOM操作
-
阻塞：基于脚本加载
-
异步更新：基于异步更新
-
减少回流和重绘制
-
css和js脚本阻塞渲染，可以懒加载或者SSR加快首屏时间，css，js放置正确位置
性能监控
性能优化不是一蹴而就，需要性能监控体系去持续优化