性能优化

一些问题

• 一个应用使用一段时间就会很卡，可能是什么原因？
• 一个应用首屏加载时间超级长，如果让你来优化，你会怎么做？
• 前端常见的优化手段有哪些？
• 性能优化的闭环是什么？

分类

网络

• DNS 缓存和 prefetch
• 预请求
• 接口优化。主要是后端优化，比如优化接口处理逻辑，减小请求资源体积等。前端层面是合并请求，减少请求次数
• Http 缓存
• 开启 gzip 压缩
• Tcp 优化。长连接或预连接
• CDN 和缓存。在距离更近的服务器上存放静态资源
• 本地磁盘缓存。缓存一些不常变的资源到本地，比如地图文件，hmi file 等
• 使用 http2 协议

渲染（包括前端数据处理和页面绘制）

• 减小资源体积。比如压缩资源，图片或组件懒加载，按需引入第三方模块，tree shaking，iconfont 代替图标等
• 减少主线程的计算耗时。借助 worker 或后端处理复杂计算，事件节流和防抖，异步加载脚本，异步分片（参考 react18）等
• 减少回流重绘。比如合并 dom 操作，在绝对定位元素上做动画，虚拟 dom 计算最少 dom 改动，离线 dom 操作等
• CSS 优化
• 内存优化。大部分页面卡顿都是内存泄露以及频繁的 gc 导致
• 图片优化。压缩图片，加快图片加载，使用 webp，上传 cdn 等
• 延迟计算或渲染。比如将一些耗时的操作延迟到下一个宏任务
• 动画优化。比如开启硬件加速等
• canvas 渲染优化。比如离屏渲染，曲线图采样等
• Threejs 渲染优化。比如减少阴影绘制，压缩模型，点采样
• 框架层面。比如减少 react 组件的重复渲染次数等

内存优化

参考 https://zhuanlan.zhihu.com/p/616077806

界定内存问题的标准

• 内存膨胀：即在短时间内内存占用极速上升到达一个峰值，或者硬件设备跟不上
• 内存泄漏: 内存持续升高
• 频繁垃圾回收：通过内存变化图。会导致应用卡顿

怎么监控内存？

• 浏览器任务管理器
• perfomance timeline 时序图记录
• Memory 堆快照，比如查找分离 dom

如何优化内存泄漏？

• 慎用全局变量和闭包
• 清除游离 DOM 对象。可以通过内存快照排查
• 清除定时器
• 生产环境清除 Console

如何优化频繁 GC？

• 代码中存在对内存操作不当的行为

其他

构建优化。目的是提升研发和 ci 效率

• webpack 优化。涉及构建速度和包体积优化，比如优化 sorsemap，压缩 js 和 css 等

场景

首屏优化

• 服务端渲染
• 网络优化
• 渲染优化
• 代码优化

图片加载慢

• 压缩/换格式。关于格式选择，可以参考 https://segmentfault.com/a/1190000022359123
• 小图使用 base64，可以借助 webpack 的 loader 转换小图
• 懒加载
• 预加载
• iconfont/雪碧图。减少请求数
• CDN。分流，减少服务器压力
• http 缓存
• 渐进式图片

长列表

• 分页/滚动加载
• 虚拟列表