数智资源网
首页 首页 网络知识 查看内容

写给前端工程师的Web前端性能优化的10点建议

木马童年 2020-3-3 15:32 170 0

1、 减少HTTP请求在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。一个正常HTTP请求的流程简述:如在浏览器中输入”www.xxxxxx.com”并按下回车 ...

1、 减少HTTP请求

在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。

一个正常HTTP请求的流程简述:如在浏览器中输入”www.xxxxxx.com”并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

HTTP协议是无状态的应用层协议,意味着每次HTTP请求都需要建立通信链路、进行数据传输,当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接并释放连接,这必定会造成资源的浪费,而在服务端,每个HTTP都需要启动独立的线程去处理,这些通信和服务的开销都很昂贵,每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。

减少HTTP的主要手段是合并CSS、合并JavaScript、合并图片。将浏览器一次访问需要的JavaScript、CSS合并成一个文件,这样浏览器只需要一次请求。图片也可以合成,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。

2、 使用浏览器缓存

对一个网站而言,CSS、javaScript、Logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好地改善性能。通过设置HTTP头中的Cache-Control和Expires属性,可设定浏览器缓存,缓存时间可以是数天,甚至是数月。

在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可以通过改变文件名实现 ,即更新JavaScript文件并不是更新JavaScript文件内容,而是生成现代战争新的JS文件并更新html文件中的引用。

使用浏览器缓存策略的网站在更新静态资源时,应采用分批次更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而应该一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器突然大量缓存失效,集中更新缓存,造成服务器负载骤增,网络堵塞的情况。   

3、服务端启用压缩

在服务器端对文件进行压缩,在浏览器对文件解压缩,可有效减少通信传输的数据量。文本文件的压缩率可达80%以上,因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

4、 CSS放在页面最上面、JavaScript放在页面最下面

浏览器会在下载完全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS,HTML规范清楚指出CSS要放包含在页面的区域内。JavaScript则相反,浏览器在加载JavaScript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此JavaScript最好放在页面最下面,但如果页面解析时就需要用到JavaScript,这里放在底部就不合适了。

JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,即

数据传输 数据交换 数据传递 运营商 服务提供商 数据中心
0