前端可以做的性能优化，主要分为以下几个方面：
- 网络优化
- 页面渲染优化
- Js优化
- 图片优化
- webPack打包优化
- Vue优化
一.网络优化
1）DNS预解析
<link rel="dns-prefetch" href="https://cdn.bootcss.com">
通过link标签的dns-prefetch属性，提前获取域名对应的IP地址来减少DNS域名解析的时间。
010
减.....3轻服务端压力，快速得到数据（打算单独写一篇文章学习）
3）压缩响应
通过减少HTTP请求产生的响应包的大小，从而减少响应的时间。Web客户端可以通过HTTP请求中的Accept-Encodeing头来标识对于压缩的支持。
Web浏览器看到这个请求头，会使用客户端的一系列方法中的一种进行压缩,web服务器通过响应中的Content-Encoding头来告知Web服务端通过哪种方法进行压缩。
通常会压缩的是HTML文档，脚本和样式表；但是图片和PDF文件不应该被压缩。
4）使用多个域名
浏览器会有同域名限制并发下载数的情况，使用不同的域名可以最大化下载线程，但应保持在2-4个域名内，以免DNS查询损耗。
5）避免图片的src为空
就算src为空，浏览器仍会发起一个HTTP请求；
二、页面渲染优化
1）避免css阻塞
应当尽早将css放在head标签里，和尽快启用CDN实现静态资源加载速度的优化。
2）降低css选择器的复杂度（减少嵌套、利用继承）。
3）避免使用css表达式（css表达式会被频繁计算）。
4）避免js阻塞
js可以修改CSSOM和DOM,因此js会阻塞页面的解析和渲染，并且会等待css资源的加载，所以需要给js资源加上defer或async，延迟js脚本的执行。
5）使用外链式的js和css
因为js和css如果在外部文件中，浏览器可以缓存它们，html文档的大小会被减小而不必增加HTTP请求数量，会产生比较快的页面。
6）使用字体图标代替图片图标
7）首屏加载优化
资源按需加载，不需要的资源延迟加载
8）减少重绘和回流
用translate 代替 top;用visibility替换dispaly:none;用opacity代替visibily; 尽量少用table布局，尽量减少频繁的去操作dom；
三、JS中的性能优化
使用委托事件
防抖和节流
尽量不要使用js动画
使用computed对计算结果进行缓存
四、图片的优化
图片懒加载，
使用css效果替代图片，
图片压缩，
图片注意格式，大图片用webp,小图片用png.
