欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

优化页面访问速度,前端优化技巧

程序员文章站 2022-11-07 13:56:13
优化页面访问速度(四) ——前端优化 一、概述 前端的优化,主要可以通过减少HTTP请求、非实时请求改异步、缓存、文件压缩、CDN加速、独立图片服务器等。 二、减少HTTP请求 1、HTTP开销 HTTP请求,需要耗费资源,主要包括域名解析、建立TCP连接、发送请求、等待处理结果、下载资源、解析请求 ......

优化页面访问速度(四)

——前端优化

一、概述

前端的优化,主要可以通过减少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工具,来搭建文件系统,管理这些图片服务器。

转自:https://www.cnblogs.com/zmdComeOn/p/11704930.html