可以使用浏览器的lighthouse来诊断，根据诊断建议报告来做性能优化
先定位问题，找到要优化的点，哪些需要重点去优化
- JS中的事件委托（也称为：事件代理），用于：减少DOM操作
- 防抖和节流，用于高频事件性能优化
- 减少请求数：使用浏览器缓存、减少重定向请求、减少dns的查询次数
- 减少资源大小：压缩图片、开启网络压缩（vue的默认压缩和gzip压缩，需要服务器设置）、压缩js和css丑化代码
- 找最快的服务器：进行cdn加速
- 图片预加载，css样式表放在顶部且link链式引入，js放在底部dody结束标签前
- API接口数据设置缓存，css sprites或svg sprites，js/css源码压缩，图片大小控制合适，使用iconfont或者svg：它们比图片更小更清晰，网页Gzip压缩
- 减少dom操作次数
- 减少dom元素数量，合理使用:after :before等伪类
- 避免重定向，图片懒加载，前后端分离开发，资源按需加载，最好能做到首屏直出（即：服务端渲染）
- 避免使用css expression（css表达式）
- 多域名分发划分到不同域名，解决浏览器域名请求并发数问题，同时也解决了请求默认携带的cookie问题
- 尽量减少iframe使用，它会阻塞主页面的渲染
- 对所有资源压缩：js、css、字体、图片等，甚至html
CSS的优化
- 避免嵌套太多的选择器
- 减少css嵌套，最好不要嵌套3层以上
- 建立公共样式，把相同样式提取出来作为公共类使用，不如常用的清除浮动等
- 拆分出公共css文件，把大部分页面的公共结构的样式提取出来放到单独的css文件里
- css sprite / svg sprite
- 减少重排，避免不必要的重绘
- 简化css，借助webpack、gulp等进行代码压缩丑化
- 尽量不要使用过多的内联样式
- 异步加载css文件
- 首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的文件慢
- 不要使用@import引入css文件，用link
- less、sass抽取公共部分写成函数
