一，图片处理
处理图片时：
方法一：图片地图
适用于页面有多个网站时：把多个图片整合成一张图片；如对每个图片有其他操作，点击该图片时提交一个url,同时提交图片的位置信息，根据判断点击的位置信息，执行后续操作
方法二：css sprites css精灵
适用于单独显示样式：将多个图片融合到一张图上 ，将img标签换成div,截取这张大图片的某个位置，background-size调整大小，background-position选择截取位置，利用css样式选择大图片的部分排列显示；适用于较小的图片
方法三：base64
打包时使用url-loader 把每三个8Bit的字节转换为四个6Bit的字节,将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串
优点：
base64的图片会随着html或者css一起下载到浏览器,减少了请求.
可避免跨域问题
缺点：
老东西（低版本）的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大，不利于css的加载。
适用场景：
应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片。
方法四：webp
在图片后缀增加webp，在同等画质的情况下使图片体积减少25%左右
方法五：
使用iconFont代替一些图标
二，CDN加速
三，将样式表放在头部
四，css以下属性开启gpu加速
transform（当 3D 变换的样式出现时会使用 GPU 加速）
opacity 用于指定元素透明度
filter 修改所有图片的颜色为黑白
will-change 过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。
五，将脚本放在body闭合的上方
防止js阻塞dom元素的渲染；
浏览器运行的机制 先渲染dom，然后遇到js，加载并执行js，然后继续渲染dom；
async 先渲染dom，然后遇到js，异步加载js，当js加载完毕后执行，然后渲染dom；
defer 先渲染dom，遇到js，异步加载js，在dom渲染结束后，按顺序执行js。
DocumentContentLoaded和loaded的差别
DocumentContentLoaded渲染dom结束后立即执行，loaded是在页面完全加载（img等加载完毕后）执行。
六，接口提速
graphQL: 一门查询语言，可以用来按需加载；比如当查询很多条数据且每一条数据有很多属性，可以只查询自己需要的字段
定义数据池=》定义数据结构=》定义查询规则
七，合理利用缓存和数据共享
缓存从接口获得的数据，下一次不需要发送请求就可以从缓存中直接得到数据；缓存中不存在再去拉去接口（好处：可以实现多接口复用、多机共享缓存）
八，合理使用防抖和节流
九，Vue中的性能优化
1，合理使用v-if和v-show；
2，借用但不需要修改响应式属性的时候，可以先将其缓存下来，否则每次调用都会出发该属性的getter等；
3，合理使用computed
4，keep-alive进行缓存
5，合理拆分组件，vue颗粒化更新时内部不需要变动的组件就不会更新
6，路由懒加载
十，webpack打包时的优化。
1，UglifyjsWebpackPlugin 代码压缩
2，CompressionWebpackPlugin gzip压缩
3，babel-loader 开启缓存，es6没有修改的地方可以直接用缓存，excludes剔除第三方包
4，HotModuleReplacementPlugin 无需刷新实现热更新
5，happyPack 多进程打包
6，SplitChunksPlugin 抽离公共资源
7，html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中，避免重复
8，BundleAnalyzerPlugin 进行打包后包体积的分析
