您好!欢迎访问网站!
全国咨询热线:
热门关键词:
优化心得
您的位置: 首页 >> 优化心得 >> 正文内容

web前端性能优化的方法(常用的前端性能优化方法有哪些)

作者:Zbk7655 浏览量:46 时间:2025-05-08 11:53:29

常使用的前端性能优化方法有哪些

性能优化,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。为了实现这一效果,我们应当尽可能提前进行性能优化,未雨绸缪,甚至最好是将它作一个周期性的工作来进行。

一个好的性能优化思路应该分为四步:

明确优化目的。优化的目的可是增强网民体验,例如消除一些有明显卡顿的页面和操作,还可是节省服务器带宽流量、减少服务器压力这些。不论如何,你要有一个目的。有大多数人只是为了优化而优化,目的丢了,或甚至刚开始就没考虑过,只是不断追求更加好看的性能指标。

确定要做到什么程度。

优化是永无止境的,为了避免陷入到前面说的无意义的性能黑洞中,我们最好能为实际的业务情况定义出一个相对客观的标准,代表优化到什么程度。例如,根据当下的性能指标与业务量对比,发现最大并发数也许会超过当前的2倍,那么此时优化到争取优化提高3倍,至少保证能提高2.5倍,是一个比较合理的标准。

请点击输入图片描述

请点击输入图片描述

3、找到瓶颈点

大多数情况下,流程上的优化远胜于语法级别的优化,所以我们最好还是可以借助一些客观数据,以获得更加多的运行环境相关的信息,来找到整个“木桶”上最短的一块“板”。如整个系统的总体架构、服务器的信息等,便于定位到底性能的瓶颈点在哪。

4、着手优化

做优化的正确思路一般符合下面两个方向。

第一,空间换性能。一个节点顶不住就多**一个节点出来,独一份的数据导致资源竞争得厉害,就多**一份数据出来。

第二,距离换性能。数据从服务端经历层层处理返回到顾客端觉得慢的话,那么能不能直接保存在顾客端,或至少是离顾客端尽最大可能近的地方。

性能优化只是Web前端人员需要掌握的基础技能之一,想要拿到高薪,你要具备扎实的理论基础以及丰富的实战经验,而这些需要系统的学习以及较多的项目日积月累。

前端性能优化有哪些方法

前端性能优化的方法有:

一、减少http请求数

常使用的减少http请求数有下面以下几种:

1、合并图片。当图片较多时,可以合并为一张大图,从此减少http请求数。常常变化的图片可能不太合适,变化相对稳定的就可考虑。合并大图除了能减少http请求数外,还可以完全利用缓存来提高性能。

2、合并压缩css样式表和js脚本,他们的共同目的都是为了减少http连接数。

3、去掉不必要的请求。开发写代码或系统升级之后残留的无效请求连接。

4、完全利用缓存。这里说的缓存是顾客端侧缓存或许说阅读器缓存。Expires头信息是顾客端侧缓存的重要依据,格式类似于Expires:sun,20 Dec 2017 23:00:00 GMT。

如果当前时间小于Expires指定的时间,阅读器就会从缓存中直接获取相关的数据信息或html文件,如果当前时间大于Expires指定的时间,阅读器会向服务器发送请求来获取相关数据信息。

以Apache为例,可在Apache的配置文件httpd.conf中设置Expires。

二、图片优化

优化方法:

1、尽最大可能的使用PNG格式的图片,它相较来说体积较小。

2、对于不一样格式的图片,在上线之前最好进行一定的优化。

3、图片的延迟加载,也叫做赖加载。

三、使用CDN

CDN即内容分发网络,可使网民就近取得所需内容,解决网络拥挤的状况,提高网民访问网站的响应速度。

四、开启GZIP

GZIP即数据压缩,用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单,到对应的web服务配置文件中设置一下即可。以Apache为例,在配置文件httpd.conf中添加。

五、样式表和JS文件的优化

一般我们会把css样式表文件放到文件的头部。例如,放到<head>标签中,这样就可让CSS样式表尽早地完成下载。对应js脚本文件,一般我们把他放到页面的尾部。

六、使用无cookie域名

无cookie域名的概念:当发送一个请求时,同时还需要请求一张静态的图片和发送cookie时,服务器对于这些cookie不会做任何使用,亦就是说这些cookie没什么用,没不要随请求一同发送。