1，拯救移动端图标 SVG
- 从 png 到 iconfont( www.iconfont.cn/ )
- 多个图标，一套字体，减少获取时请求的数量和体积
- 矢量图形，可伸缩
- 直接通过 css 修改颜色大小等
- 从 iconfont 到 svg ,
npm install -D @svgr/webpack
2，使用 flexbox 优化布局（上）
- 使用 flexbox 实现 float 效果，性能更高
- 容器有能力决定子元素的大小、顺序、对齐、间隔等
- 横、纵双向布局
3，使用 flexbox 优化布局（下）
- 对齐
- 安排子元素顺序
4，优化资源加载的顺序（给资源设置优先级）
浏览器默认安排资源加载优先级。使用 preload,prefetch 调整优先级
- preload 提前加载较晚出现，但对当前页面比较重要的资源
5，预渲染页面
大型单页应用的性能瓶颈：JS 下载+解析+执行 在打包的过程中，将页面进行提前渲染，加快用户看到首屏的时间
- react-snap
6，windowing 提高列表性能
- react-window
7，使用骨架组件减少布局移动
skeleton/placeholder 的占位作用，提升用户感知性能
- react-placeholder
