常见前端性能优化方式
在这个流量先行的时代，人们越发的暴躁不安，“急功近利”的心理在等待网页加载的时候，显得更加突出，对推广阶段的的网站，如果网页显示的时间增加1s，可能会损失不少的浏览量，前端优化，提升加载速度，迫在眉睫！下面就总结一下，我在工作中常用的几种优化方案，大神，轻点喷哈
1、拆分文件。这一项是针对首屏加载，如果加载的文件体积过大的话，加载就会变慢，我们可以将文件进行拆分，并压缩文件，提升加载速度。特别是图片，如果能使用base64格式，尽量使用，负责一定要压缩过再使用，推荐一个压缩工具，好使！tinypng
2、文件合并。这一点和第一点是相对的，我们知道浏览器同时可发送的请求数是有限制的，不可过多的同时加载多文件（一般是六个），所以适当的拆分文件可以减少每个文件加载完成的时间，以此提升加载速度。举个例子，特别是一些小的图片文件，我们应该合并成雪碧图，以减少资源请求数量！
3、使用cdn资源。一些资源型文件，最好是使用稳定的cdn资源，我之前自己写过个demo，把echarts、element都用npm包形式安装的，加载时间大约在3s左右，真的是太慢了，后来，提出优化方案，使用bootcss资源，加载时间变为800ms，速度提升了80%。
4、使用缓存。当然不做特殊设置的话，一般浏览器会自动去缓存，缓存分为强缓存（不去server请求，直接使用磁盘中的老文件，控制请求头expires【服务端绝对时间】和cache-control【相对时间段，超过时间段，就不再使用缓存】，如果两参数同时存在，以cache-control为准）和协商缓存（请求一次server，看是否需要使用新文件，如果老文件没有变化，再使用老文件，否则请求新文件【last-modefied\If-modefied-since：文件是否有修改、Etag\If-None-match：可以理解为唯一的文件指纹】）。
5、非核心代码的懒加载，比如用户操作后才起作用的弹出层逻辑，这个时候就可以使用这个懒加载功能，提升首屏加载速度。
1）、通过动态创建script标签的方式引入js，什么时候使用，什么时候加载。也可以使用webpack的异步动态加载功能：
{ path: '/model', name: 'model', component: () => import('@/views/Model/Model'), meta: { title: '弹层' } }
或者浏览器闲置的时候直接预加载：
document.addEventListener('click', () => {
import(/* webpackPrefetch: true */ './click.js').then(({default: clickFun}) => { // webpack魔法注释
clickFun()
})
}, false)
直接在body中引入的script怎么处理呢？
2）、规范中已经为我们设计好了文件异步加载的方法，defer、async
<script src="path-to-a.js" defer> <script src="path-to-b.js" defer>
<script src="path-to-a.js" async> <script src="path-to-b.js" async>
defer: 在html解析完成后，其他同步js执行完，才执行，如果有多个defer文件，顺次执行。
async：在html解析完成后，其他同步js执行完，才执行，加载完成后立即执行，和顺序无关。
6、开启预解析：
我们现代浏览器是默认开始预加载的，针对其他浏览器，我们还是可以做一点优化的。比如chrome和Firefox默认的可以预加载a标签链接的网页的资源，有些浏览器就不行，特别是https的网页，这些制定规范的时候，制定者已经为我们解决了，我们只要设置meta就能实现a标签的预加载。先来了解一下http-equiv属性：
针对预加载，我们可以这么写：
<meta http-equiv="x-dns-prefetch-control" content="on">
这样，页面里所有的a标签链接到的资源，都可以预先加载，当你点击该链接，到新网页中去，直接从磁盘读取文件，加载速度就快了。
同时，还可以预加载指定域名下的资源:
<link rel="dns-prefetch" href="//host-name-want-to-prefetch.com">
当然，第6点，是说的针对后续页面加载速度的。
今天就说这么几点吧，大家用到项目中，加载速度一定会提升不少的。
如果你有更好的方案，欢迎分享给大家！
