「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
常见性能问题
页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等指标会影响用户的等待时长，而 CPU 占用、内存占用、本地缓存占用等可能会导致页面卡顿甚至卡死。因此，性能优化可以分别从常见耗时和资源占用两方面来解决。
解决时间问题：减少耗时
1、网络请求优化
- 减少 DNS 查询时间，比如使用浏览器 DNS 缓存、计算机 DNS 缓存、服务器 DNS 缓存
- 合理地使用 CDN，有效地减少网络请求耗时
- 对请求资源进行缓存，包括但不限于使用浏览器缓存、HTTP 缓存、后台缓存，比如使用 Service Worker、PWA 等技术
- 移除代码中无用的部分，比如使用 Tree-shaking、按需加载、代码分割、移除用不上的依赖项等
- 对请求资源进行合理的拆分（CSS、Javascript 脚本、图片/音频/视频等），减少请求资源的体积
- 对资源进行压缩，减少传输数据大小
- 使用 HTTP/2、HTTP/3，提升资源请求速度
- 对请求进行优化，比如对多个请求进行合并，减少通信次数；对请求进行域名拆分，提升并发请求数量
2、首屏加载优化
我们要实现的是：将页面内容尽快展示给用户，减少页面白屏时间。
方案：首屏加载耗时优化、使用页面过渡效果。
- 对页面进行分片/分屏加载，将页面可见/可交互时间提前
- 优化资源加载的顺序和粒度，仅加载需要的资源，通过异步加载方式加载剩余资源
- 使用差异化服务，比如读写分离，对于不同场景按需加载所需要的模块
- 使用服务端直出渲染，减少页面二次请求和渲染的耗时
- 使用秒看技术，通过预览的方式（比如图片）提前将页面内容提供给用户
- 配合客户端将资源和数据进行离线，可用于下一次页面的快速渲染
- 使用骨架屏进行预渲染，以及使用过渡动画让用户感知到页面正在顺利加载，从而避免用户对于白屏页面或是静止页面产生烦躁和困惑。
3、渲染过程优化
减少用户的操作等待时间，避免出现卡顿的情况。
- 使用资源预加载，在空闲时间，提前将用户可能需要用到的资源进行获取并加载；
- 减少 DOM 数量、减少/合并 DOM 操作，减少浏览器渲染过程中的计算耗时；
- 通过合理使用浏览器 GPU 合成，提升浏览器渲染效率；
- 使用离屏渲染，在页面不可见的地方提前进行渲染（比如 Canvas 渲染）；
- 通过将页面渲染帧率保持在 60FPS 左右，提升页面交互和渲染的流畅度。
4、计算/逻辑运行提速
- 通过将 Javscript 大任务进行拆解 + 并行计算的方式，有效地降低整体计算耗时，比如使用 Web Worker；
- 通过使用运行效率更高的方式，减少计算耗时，比如使用 Webassembly；
- 通过将计算过程提前，减少计算等待时长，比如使用 AOT 技术；
- 通过使用更优的算法或是存储结构，提升计算效率，比如 VSCode 使用红黑树优化文本缓冲区的计算；
- 通过将计算结果缓存的方式，减少运算次数。
空间角度优化： 降低资源占用
资源占用常见的优化方式包括：
- 合理使用缓存，不滥用用户的缓存资源（比如浏览器缓存、IndexDB），及时进行缓存清理；
- 通过使用数据结构享元的方式，减少对象的创建，从而减少内存占用；
- 避免存在内存泄漏，比如尽量避免全局变量的使用、及时解除引用等；
- 避免复杂/异常的递归调用，导致调用栈的溢出。
如何在项目中进行性能优化
- 确定优化的目标和预期；
- 确定技术方案；
- 对工作内容进行排期，并按计划执行；
- 优化完成后，结合目标和预期，对优化效果进行复盘。
