性能优化总论
1.性能优化的必要性
性能优化一直是我们在讨论的一个话题，也是很重要的知识点，当项目功能越来越多，模块规模一步步扩大，就会发生一系列的性能问题，比如说vue首屏加载会变得非常慢，编译会延迟，打包也要等半天。
必须明确性能优化的重要性，任何一个项目的生命历程都会走向性能优化这个阶段
2.性能优化的误区
我们经常会犯错误的一个地方是，混淆了性能优化与执行效率的概念。
比如：
1.while 循环快还是 for 循环快？
2.|0 是不是比 Math.floor 性能好？
3.if else 与三元运算符哪个更快？
很多人会认为以上三个问题就是性能优化的范畴了，会去纠结这些问题。然而实际上，这三个问题与性能优化毫无关系，不过是几个执行效率的问题罢了，纠结也无益。
3.什么才是前端的性能优化
总结来说，就是这三个方面
1.页面加载性能（加载的时间）
2.动画与操作性能（是否流畅无卡顿）
3.内存、电量消耗（内存占用，耗电量）
针对以上方面做性能优化
1.页面加载性能（加载的时间）
a.减少请求数
(1) js,css,打包到html，并为一个请求
(2) 精灵图，多个小图并为一个图片，只请求一次
(3) 小图片用字体图标代替，或者使用data-url
(4) js控制图片懒加载，异步加载，页面初始化的时候避免一次请求多张图片
b.减少传输体积
(1) js库存放在静态cdn上，项目执行的时候，一个链接拿过来就行
(2) 压缩策略，大图压缩(tinypng)，代码压缩(webpack,Gzip)
(3) 优雅降级，根据用户网络状况以及机型控制图片清晰度
(4) 清晰度低的图片，锐化处理，提高用户体验
c.缓存策略
(1) 图片缓存
(2) 数据缓存，常用的就是地址选项，省市区，不用重复请求，缓存至用户本地即可
2.动画与操作性能
a.避免操作过多dom元素
可采用数据驱动，操作虚拟dom，通过diff算法，最后比较转换成真实dom
b.避免去操作元素的top，left等位置的值
如果去改变元素的top与left等值，会导致dom回流，可以采用dom重绘
dom回流：当页面中的html结构发生改变（增加、删除元素、位置发生改变），浏览器都需要重新计算一边新的DOM结构，重新对当前的页面进行渲染。回流非常消耗性能，特别是性能有限的移动端。
dom重绘: 当某个元素的部分样式发生了改变（如背景颜色、字体颜色、位置(使用transform的情况下)发生了改变），浏览器重新渲染当前元素即可。回流比重绘耗能耗时，所以在优化程序系统的时候，我们尽量要减少浏览器的DOM回流操作。
平时操作元素的top值，left的值可以用transform里的translate代替
3.内存、电量消耗
a.作用域问题 (内存相关)
(1) 避免定义无意义变量，每去var定一个值或者定一个对象都是占内存的
(2) 禁止滥用闭包，js垃圾回收机制不会回收闭包里的变量，它们将会常驻内存。
b.循环 (性能相关)
前端应避免大规模数据的比对与循环，可分开处理或交由后台先处理好，否则也会导致卡顿
c.电量消耗 (主要是前端做游戏的时候)
(1) 优化美术资源，比如合理规划图集，约定好模型的最大三角形面数，制定合理的粒子效果规范。这个可以说是游戏优化中最重要的一个，因此，技术美术在游戏开发中作用巨大。
(2) 简化或者优化着色器（shader），如在游戏开始前就对Shader进行编译和加载。
(3) 使用Batching，尽量减少DrawCall
Batching : 批处理动态或静态物体(批量处理，优化电量消耗)
DrawCall : CPU调用图形编程接口,比如DirectX或OpenGL,来命令GPU进行渲染的操作(描绘次数越多，耗电量越大)
以上是本人的总结与经验，如有不对，敬请指正。
如对你有帮助，可以转发评论，转发请注明作者及出处。