前端性能优化

网络方面：

1、减少http请求（合并js/css文件、雪碧图、使用base64表示简单的图片）；
2、减少资源体积（gzip压缩、js混淆、css压缩、图片压缩）；
3、缓存（DNS缓存、CDN部署与缓存、http缓存）；
4、移动端优化（首屏加载优化、慎用web字体）；

渲染及dom操作方面：

1、优化网页渲染（文件引用顺序css/js、避免内联样式）；
2、DOM操作优化（多使用className、多事件代理、多使用css动画、减少DOM操作、少使用css表达式）；
3、操作规范（img/iframe中src、css属性为0省略单位、禁止图片缩放、CSS减少重复多继承）；
4、移动端优化（长列表优化、防抖和节流、~~~能力不足，待探究）；

数据方面：

1、图片加载处理（预加载、 懒加载、首屏加载时进度条展示）；
2、异步请求的优化（使用正常的json数据格式进行交互、数据缓存、数据埋点与统计）；

image.png