前端性能优化

HTML方面

• 对于SPA应用，可以使用预渲染或者服务端渲染，提高首屏加载速度；
• 引入css时采用link标签，并放入头部，使其与文档一起加载，减少页面卡顿时间；
• script标签可以放到body最下边或者添加defer/async属性，因为script的加载会阻塞页面渲染；
• 尽量减少dom结构的重排和重绘；
• 使用懒加载，看不到的内容等需要时再进行加载。

CSS方面

• 能用css解决的问题不要用js解决，如动画、溢出省略号等；
• 使用css雪碧图，减少网络请求；
• 对不同分辨率的屏幕采用不同分辨率的图片，防止图片过大导致加载缓慢；
• 将合并样式分开来书写，效率更高，如margin: top 0 0 left;的效率没有margin-top: top; margin-left:left;高；
• 需要渲染动画时强制打开GPU加速：transform: translate3d(0, 0, 0);
• 抽离相同的样式，整合为class在页面中进行使用，提高css的可维护性；
• 避免使用通配符规则，如果*{}，计算次数惊人，只对需要用到的元素进行选择；
• 减少优先级低的css选择器，如：尽量少的使用标签选择器（查询效率低），而使用class。

JS方面

• 使用事件委派，减少内存消耗；
• 使用节流和防抖函数避免函数的频繁调用；
• 写循环逻辑时尽量降低时间复杂度，尽量减少使用循环嵌套和递归；
• 尽量不要创建全局变量。

Vue方面

• 使用路由懒加载模式，异步加载路由；
• 使用keep-alive缓存路由，避免频繁切换导致性能消耗；
• UI组件按需引入，避免全量引入；
• v-for和v-if不要同时使用，因为v-for的优先级更高，会先循环，导致所有内容均会被渲染；
• 图片使用懒加载，指令：v-lazy；
• 在组件销毁时记得清空定时器的内容和解绑本组件内绑定过的事件，释放内存。

其他方面

• 使用打包工具对代码进行打包压缩，若想提高打包速度，可以使用happyPack插件；
• 服务端可以使用缓存技术，强缓存和协商缓存
• CDN加速技术。

如果大家还有什么好的优化方案，可以打在评论区，一起学习。