前端性能优化
渲染层、编码优化
- 流畅的标准是16.6ms内完成页面的渲染，通过火焰图分析函数执行时间。。
- 使用懒加载资源、预加载资源
- 虚拟长列表，节点复用
- 优化渲染逻辑，提前渲染页面整体框架，后加载数据
- 首屏ssr提升首屏渲染时间
- 减少加载资源阻塞渲染，scrpit标签async、defer(async放弃了依赖关系)
- 减少重绘和回流
- 使用requestAnimationFrame提升动画性能
- web worker 分担计算资源
- 减少dom操作
- 使用Immutable 减少对比深拷贝性能消耗
- 使用Why did you update 库发现不必要的渲染
- react-lazyload 懒加载组件
- 使用Reselect优化redux
webpack优化
- 资源压缩
- 利用webpack代码分割
- 动态导入模块
- 去除console、等无用代码
网络层
- 合并http请求
- 使用gzip压缩
- 利用长连接减少tcp建连次数
- 利用多域名加载资源，回复浏览器限制
- 雪碧图减少http请求
- cdn
- 前端缓存
- http
- bigpipe
react层
- 使用shouldComponentUpdate、pruecomponent、React.memo、memoize库减少render
- 长列表加上key，减少列表更新时 diff时间
内存优化
