优化页面访问速度(四) ——前端优化

优化页面访问速度(四)

——前端优化

一、概述

前端的优化,主要可以通过减少HTTP请求、非实时请求改异步、缓存、文件压缩、CDN加速、独立图片服务器等。

二、减少HTTP请求

1、HTTP开销

HTTP请求,需要耗费资源,主要包括域名解析、建立TCP连接、发送请求、等待处理结果、下载资源、解析请求等。

因此,减少HTTP请求,利于优化页面访问速度。

2、图片地图

对于多个图片,如连续的几个按钮,每个按钮都是一个小图片。如果逐个加载图片,则需要发送多个请求,分别获取这些图片文件。

这里,可以将这些图片合并成一张图片,并且用CSS的<map>、<area>来实现定位,针对不同的位置给予不同的点击跳转链接,这样有效减少请求数量。

三、异步请求

对于实时性要求不高的请求,例如记录文章访问量,就可以在进入页面后,加载完毕后,再发送ajax给服务端,进行统计,即可。不需要同步等待,节约时间。

四、缓存

缓存分为浏览器缓存和Nginx层缓存。

1、浏览器

浏览器缓存又分为本地缓存和协商缓存,本地缓存即缓存在浏览器端,协商缓存是缓存在服务端。

1)本地缓存

本地缓存的http状态码是200 from cache,可以在header设置本地缓存,字段是cache-control,参数包括no-store(禁止缓存)、no-cache(禁止本地缓存,允许协商缓存)、max-age=xxx(设置本地缓存的最大时间,单位是秒)。

2)协商缓存

协商缓存的http状态码是304 not modify,浏览器没有命中本地缓存时,或者cache-control字段被设置了no-cache,则浏览器会去服务端请求内容,并在响应头的header中带上参数,if-modified-since表示最后修改时间,if-none-match是文件的指纹(修改后即会有变化)。

服务端会根据参数,判断是否用服务端的协商缓存,并且返回结果给客户端时,会带上响应头参数,Last-modified表示上次请求的时间,ETag表示服务端本次文件的指纹。浏览器会存储这些内容,并在下次请求时发送参数。

2、Nginx

Nginx可以配置缓存时间,首先在location处,匹配需要缓存的内容,例如js、css、jpg、png等,然后再location内部,设置expires = 30d,表示缓存30天。

这样,同样文件名的内容,都会被缓存30天,如果30天内该文件有改动,可以采用带参数的方式避开缓存,例如将xxx.js文件名改为xxx.js?a=1,这样就会跳过本次的缓存,Nginx会缓存该文件。

五、文件压缩

1、minify

Js、css文件,由于都是静态文件,因此可以使用文件压缩,来减少浏览器需要下载的文件大小,以加快响应速度。

文件压缩可以用minify工具,该工具可以将多个js文件压成一个,且会自动把里面的换行、空格等压缩,通常压缩完后文件大小会是原来的40%左右。

2、gzip

除了minify,还可以用gzip,将文件进一步压缩。Gzip压缩文件,采用的原理是Huffman树,将js、css中一些很长且经常使用的变量,用很短的字符来代替,且能保证代替后的内容,具备可还原性。

因此,gzip还会维护一套字典,记录压缩的内容和解压的内容的映射关系。

Gzip压缩后,文件会缩小到30%左右。

压缩有,在Nginx中需要加个配置,在server段,加入gzip on表示开启gzip压缩,另外还有其他几个参数,包括gzip_buffers(即一次发送给客户端的包大小)、gzip_comp_level(压缩级别,越大压的越厉害,但是会消耗CPU)、gzip_min_length(小于这个字节的文件不压缩)、gzip_types(设置需要压缩的文件类型)。

压缩后,刷新浏览器,在开发者模式下,可以看到加载的文件,Content-Encoding:gzip,表示开启压缩成功。

通常,JS、CSS、图片都会需要压缩和缓存,而动态文件通常不能进行这些操作。

六、CDN

1、目的

CDN加速,目的在于加快加载静态文件的速度。

2、原理

CDN,称为内容分发网络,其原理是在网络的各个实际的地点,放置服务器节点,当用户发送请求,经过智能DNS解析,可以根据IP判断地理位置、接入网的运营商类型等,选择路由最短、负载最轻的服务器,进行请求,并且存储该IP。

该服务器中,如果没有需要请求的内容,则会去真正存放代码文件的服务器请求,并且将请求结果进行缓存。后面再有请求发送过来,则直接返回结果。

七、图片服务器

通常,图片服务器需要单独部署,不和代码、数据库、nosql等服务器放在一起。因为图片服务器负载大,请求慢,占用大量的I/O,因此单独建立服务器可以保证不影响到其他服务。

当有多台图片服务器时,可以使用fastDFS工具,来搭建文件系统,管理这些图片服务器。

相关推荐