028-86261949

当前位置:首页 > 技术交流 > 前端性能优化方法

前端性能优化方法

2019/12/05 11:01 分类: 技术交流 浏览:0

 

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

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

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

 

一、DNS Prefetch

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

 

二、让前端请求的资源体积变小

我们可以使用webpack压缩前端代码,可以使用UglifyPlugin来压缩

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

 

 

三、图片懒加载

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

 

#标签:前端,前端性能优化方法