优化页面访问速度（四） ——前端优化

逃离我推掉我的手 2022-12-22 04:46 136阅读 0赞

一、概述

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

二、减少HTTP请求

1、HTTP开销

HTTP请求，需要耗费资源，主要包括[域名解析][Link 1]、建立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，称为[内容分发网络][CDN]，其原理是在网络的各个实际的地点，放置服务器节点，当用户发送请求，经过智能DNS解析，可以根据IP判断地理位置、接入网的运营商类型等，选择路由最短、负载最轻的服务器，进行请求，并且存储该IP。

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

七、图片服务器

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

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

[CDN]: https://cloud.tencent.com/product/cdn?from=10680
[Link 1]: https://cloud.tencent.com/product/cns?from=10680