
# 前端性能优化

## 构建体积

- 路由懒加载：将不同路由拆成独立 chunk，需要时再加载。
- Tree Shaking：在 ES Module 基础上移除未使用代码；引入 Lodash 等库时只引入实际使用的模块。
- 代码分割：将第三方库等内容拆成独立 chunk，利用浏览器缓存。
- 多目标打包：针对不同浏览器生成不同兼容版本，减少不必要的兼容代码。
- 压缩和混淆：缩小最终资源体积。

## 网络传输

- CDN：缩短静态资源访问距离，公共库还可能利用跨站缓存。
- 压缩：服务器压缩资源，只要解压成本小于节省的传输时间就有收益。
- 缓存：除 HTML 外的资源可配合文件 Hash 使用强缓存或协商缓存。
- HTTP/2：利用多路复用和头部压缩提高连接利用率。
- 资源提示：`preload` 预加载当前页面关键资源，`prefetch` 在空闲时获取后续页面可能使用的资源，`preconnect` 提前连接第三方域名。
- 静态资源域：在不支持 HTTP/2 的场景下，把资源分散到多个域以增加并行 TCP 连接。

## 渲染与体验

- 优化关键渲染路径。
- 图片懒加载，并使用 WebP 等体积更小的格式。
- 使用骨架屏降低用户等待时的焦虑。
- 将多张小图合并为雪碧图。
- 使用 `defer`、`async` 调整脚本加载和执行时机。

## 运行时

- 长列表使用虚拟滚动。
- 高频事件使用防抖或节流。
- 计算密集型任务可使用 Web Worker，避免阻塞主线程。

原始笔记中的“页面首屏加载时间优化”和“网络性能优化”内容高度重复，本文件按构建、网络、渲染和运行时四类合并。


整理前端构建、网络传输、缓存、渲染和运行时性能优化方法。

前端性能优化笔记


常见导致白屏过长的原因是： 界面需要渲染的内容过多，渲染时间过长导致的白屏问题

### 解决思路
由于页面复杂，首先考虑的优化手段是方向明确，效果明确的，不会对页面业务造成过多影响的优化手段，考虑如下
 - 骨架屏
 - SSR DOM 直出
 - 分屏渲染

**骨架屏虽然有利于FCP的数据展现，但是治标不治本**，用户的需求是能在首屏马上看到内容，而不是用一个骨架屏的假象替换，只能给用户心理安慰，当前页面在做事情，请稍后。但是有些用户会讨厌骨架屏的出现，因为出现意味着速度变慢

**SSR DOM 直出直观的减少页面二次请求和渲染** ， 但是如果本身页面就是有很多内容需要渲染的话，也并不是最合适的手段，而且SSR 也不是说上就可以上的，还需要考虑成本问题，计算成本抛给前端，还是全部压力在后端，还是需要均衡。后端需要的算力不一样，所以需要的服务器不一样，成本也就不一样

**分屏加载，主要利用API intersectionObserver 观察dom 元素是否在视口内的方式实现懒加载** ，当然这种一般都是用在页面有比较明显的分界线，比如列表、卡片等，图片懒加载等

---

我们的要求就是一开始就需要渲染出所有的内容，比如本事当前视口的DOM 内容就非常的复杂，只不过相当多的内容处于隐藏状态，只有触发某一个时间的时候，才会显示相应的内容。这种情况分屏显示并不要处理

- requestIdleCallback 空闲时间渲染

`requestIdleCallback` 可以在浏览器空闲时间去执行一些低优先级的任务，从而避免阻塞主线程，提高用户的相应速递

- requestAnimationFrame 分帧渲染

`requestAnimationFrame` 可以在浏览器下一重绘前执行一些任务，他可以用于创建流畅的动画效果

## 解决细节

1. [web-vitals](https://web.dev/articles/vitals?hl=zh-cn)
2. `requestAnimationFrame` 
  主要是用来做动画，他非常适合优化页面的DOM渲染，他可以将一系列操作分帧到不同时间点执行，从而避免阻塞主线程，提升页面的响应速度和流畅度
  浏览器渲染机制：
  - 浏览器每秒会尝试刷新屏幕60次（60fps），每次刷新（忽略解读Parse阶段）都会经历一下步骤
    - 样式计算（style calculation）
    - 布局（layout）
    - 绘制（paint）
    - 合成（composite）
  - requestAnimationFrame 会在浏览器执行这些步骤之前调用回调函数，这样确保dom 操作和样式计算都是在同一个周期内完成，避免对此重排重绘



深入探讨白屏优化的策略和最佳实践

白屏优化


# 前端性能优化思路

## 编译性能

  主要是打包耗时的问题
  - 编译缓存
  - 多线程打包
  - 排除模块
  - 开发环境去hash
  - 升级/更新插件（swc,babel, rollup）
  - 微前端(巨石应用)
## 运行性能
  ## 网络传输体积大
  - 打包优化
    - Tree Shaking
    - 分块打包
    - 公共库使用cdn
  - 异步加载 （defer, async, preload, prefetch）
  ## 网络传输时间长
  - 分包缓存
  - CDN
  - 异步加载
  ## 代码执行效率低
   - Performance选项卡分析
   - 时间复杂度和空间复杂度分析
   - 内存泄漏
  ## 任务集中
    - 任务分片
    - 优先级调度

深入探讨前端性能优化的各种技巧和最佳实践，从加载优化到运行时优化

性能优化

前端性能优化笔记

白屏优化

前端性能优化实战指南