网络优化
- 减少请求文件数，资源合并（雪碧图、SVG（Iconfont）、JS/CSS文件合并）
- 减少资源体积，资源压缩（精简代码；压缩JS/CSS、图片WebP格式、开启Gzip）
- 提高网络传输（缓存、PWA、CDN、HTTP2多路复用）
- DNS优化：使用浏览器DNS缓存 、计算机DNS缓存、 服务器DNS缓存，防止DNS迭代查询；使用Keep-Alive特性来减少DNS查找频率；使用较少的域名（服务器主机）来减少DNS查找的数量；DNS预解析
图片相关
- 懒加载、预加载、渐进式加载、精灵图、iconfont、WebP
重排与重绘 / 浏览器渲染优化
- CSS引入放<body>前面，提前生成CSS rule
- JS引入放<body>后面，不堵塞渲染
- 对于复杂的动画：
display: none;或position: absolute;减少对Render Tree的干扰，提升painting速度
框架优化
- 使用路由实现单页应用
- 前端路由使用路由懒加载，减小文件体积，提高首屏渲染速度
- 状态管理，redux/vuex
- 服务端渲染(SSR)，提高首屏渲染速度
- 线上环境使用引用线上专用js文件
体验优化
- 先显示框架再异步请求加载数据
- 加载或跳转时使用loading动画
