前端性能优化方法

随着前端引用变得越来越复杂，前端的性能优化变得越来越重要。大家都有这样一种体验，如果打开一个网站的速度非常快，那么在的上面的停留时间相对较长，反之，则可以以后再也不想访问这个网站了。可见性能优化的重要性，决定的用户的去留。

那么具体如何来提高前端的性能呢？要提高前端网页的性能，首先你要对当前的网站性能水平有个量化的认知，那么我们如何去查看一个网页的性能呢？非常简单，我们可以使用chorme的一个插件叫做lightHouse,该插件能够自动的分析当前网页的各项性能指标，更贴心的是，它会为你生成具有操作性的性能优化报告。Ok，那么知道了当前网站的性能瓶颈之后，我们就可以有针对性的进行性能优化了。

这里提供几种常用的，简单的性能优化方案

一、DNS Prefetch
DNS Prefetch翻译过来就是dns预加载的意思，我们在请求服务端数据的时候，首先要把你的域名转变为对应ip地址，而这个过程是比较耗时的，为了减少这个过程所耗费的时间，我们可以，让Dns对域名进行提前解析，在之后访问服务器的时候，就不需要在经过DNS解析域名了，只需要直接向目标服务器发送请求就可以了，那么具体如何实现呢？非常简单，只需要在html的头部加入如下代码即可，当然 href属性要替换成你项目中的网址

二、让前端请求的资源体积变小
我们可以使用webpack压缩前端代码，可以使用UglifyPlugin来压缩

使用webpack抽取若干模块的公共代码，可以使用commonChunkPlugin

三、图片懒加载
例如一个页面要加载非常多的图片，我们如果一开始就把图片全部加载了，则可能会让页面变得卡顿。那如何解决这个问题呢？我们可以显然用户能够看到的部分的图片加载出来，当滚动条滚动到底部的时候在去加载下一页的数据。这样就会大大减少第一次加载数据的时间，从而提高用户体验