前言

性能优化的最终目标是提高用户体验。

当用户将 url 输入浏览器后，会发生以下过程：

1. DNS 解析，通过域名查找服务器 IP
2. 建立 TCP 连接
3. HTTP 请求
4. 服务器将结果返回给浏览器
5. 浏览器解析返回的结果并渲染页面

性能优化就是尽可能提高这几个过程的效率，让用户更快、更爽地与客户端进行交互。

比如说：

• 建立 HTTP 请求是非常消耗网络资源和服务器资源的行为，我们可以减少请求次数和减少请求花费的时间
• 静态资源从服务器返回给客户端同样消耗带宽和服务器，我们可以利用 CDN 和 HTTP 缓存加快请求静态资源的速度
• 浏览器的回流非常消耗性能，我们可以在代码上优化 DOM，比如 React 使用 useMemo 和 useCallback 等钩子来减少非必要的组件更新
• 用节流和防抖来延缓用户频繁操作带来的副作用
• 浏览器一次性需要渲染的内容太多，可能导致白屏，用户等待焦灼，可以放一个骨架屏延缓用户焦虑
• 渲染长列表时，可能因为数据量太大导致浏览器卡顿，我们可以利用分时函数（timeChunk）来慢慢渲染页面或者将数据缓存、分页
• Lazy-load 实现图片懒加载等
• ...

总的来说，前端性能优化就是从网络、资源消耗、浏览器渲染这三个维度入手，对每个过程进行优化。