简单聊聊Web优化

• HTTP缓存

使用缓存的优劣

因为Web的访问时下载特性&＃xff0c;使用缓存可以有效避免每次访问都下载资源给服务器造成带宽压力、同时减少Web加载时间。

但缓存使用不当&＃xff0c;会造成用户无法看到最新的内容或者显示问题。

浏览器缓存机制

根据http协议&＃xff0c;在 http 1.0 时代&＃xff0c;给客户端设定缓存方式一般通过两个字段 Pragma 和 Expires:

其中pragma字段代表是否使用缓存&＃xff0c;Expires代表缓存时间

http 1.1 新增加了 Cache-Control 来定义缓存过期时间&＃xff0c;目的是针对上述 Expires 时间是相对于服务器而言&＃xff0c;无法保证和客户端时间统一的问题

max-age:指示客户机可以接收生存期不大于指定时间&＃xff08;以秒为单位&＃xff09;的响应。

今天主要说明的三种缓存方式&＃xff1a;

public: 所有内容都将被缓存(客户端和代理服务器都可缓存)。

no-store:所有内容都不会被缓存到缓存或 Internet 临时文件中。

no-cache: 告诉浏览器、缓存服务器&＃xff0c;不管本地副本是否过期&＃xff0c;使用资源副本前&＃xff0c;一定要到源服务器进行副本有效性校验。

• Public缓存

以apache为例:

打开httpd.conf&＃xff0c;找到并取消注释&＃xff1a;

LoadModule headers_module modules/mod_headers.so

然后在extra/ httpd-vhosts.conf中加入&＃xff1a;

header set cache-control " public,max-age&＃61;5"

设置完毕后&＃xff0c;重启apache&＃xff0c;刷新浏览器页面&＃xff0c;观察缓存时间&＃xff0c;过5秒后&＃xff0c;观察缓存时间。

在有效期内&＃xff0c;浏览器返回的状态码均为200&＃xff0c;from cache。

• No-cache缓存

在进行一个测试&＃xff1a;

header set cache-control "no-cache"

设置完毕&＃xff0c;重启apache&＃xff0c;刷新浏览器页面观察&＃xff0c;此时应该状态码为304

这种缓存模式通过header头的两个字段&＃xff1a;Last-Modified&＃xff08;最后修改时间&＃xff09;和ETag&＃xff08;唯一标识符&＃xff09;来判断是否需要重新更新资源。

Last-Modified代表的是文件最后修改时间

ETag代表的是文件唯一标识符&＃xff08;具体规则由服务器软件自动判定或手动设置&＃xff09;

判断这两个参数是否一致&＃xff0c;如果一致返回状态码304&＃xff0c;代表这个资源没有被更改过&＃xff08;可以使用本地&＃xff09;

• No-store缓存

就是不使用缓存&＃xff0c;每次打开页面一定向服务器索取最新资源。

Public与no-cache对比&＃xff1a;

虽然no-cache可以随时使用最新的资源且节约服务器带宽&＃xff0c;但依然要向服务器发起http请求进行询问&＃xff0c;没有能够非常有效的减少http请求的次数。

Public这种强缓存可以将请求和带宽优化做到极致&＃xff0c;但如果利用不好就会造成用户显示内容的滞后。

no-store&＃xff08;禁用浏览器缓存&＃xff09;考虑服务器压力问题一般不会应用在网站上&＃xff0c;小部分内网、局域网用户会用到。

具体可以看流程图&＃xff1a;

Css3规范中也可以将图片转化为base64编码格式放到css文件中&＃xff0c;从而减少图片的加载&＃xff0c;非常适合多组的零散小图&＃xff0c;但维护性略差。

服务器使用gzip压缩

Gzip压缩可以先在服务端进行压缩&＃xff0c;然后传递给浏览器后浏览器在进行解压&＃xff0c;从而减少大小&＃xff0c;以apache为例&＃xff0c;打开httpd.conf&＃xff1a;

LoadModule deflate_module modules/mod_deflate.so

就能打开gzip压缩&＃xff0c;

接着在下方添加代码&＃xff1a;

# 告诉 apache 对传输到浏览器的内容进行压缩

SetOutputFilter DEFLATE

# 压缩等级1-9

DeflateCompressionLevel 9

#设置不对后缀gif&＃xff0c;jpg&＃xff0c;jpeg&＃xff0c;png的图片文件进行压缩

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary

一般文本压缩率能达到50%甚至更好&＃xff0c;图片压缩效果不明显&＃xff0c;同时在header里面就能看到&＃xff1a;Content-Encoding:gzip字段。

我本地测试一个6kb的html和css在启用level1时就能压缩到2kb&＃xff0c;但1-9效果并不明显。虽然gzip好用&＃xff0c;但是需要消耗cpu处理&＃xff0c;还是要看服务器本身的场景&＃xff0c;带宽重要还是CPU更重要。

图片懒加载

即当网页很长时&＃xff0c;只加载第一屏的图片&＃xff0c;当用户继续往后滚屏的时候才加载后续的图片。因为不是所有用户都想浏览整个网页。

这个实现方法一般是在开发时配合处理。

将资源分离或放入CDN

一般来说&＃xff0c;浏览器会对统一域名下的http请求数进行限制。

比如a.dajiaochongmanhua.com下有30张图片资源&＃xff0c;那么实际上浏览器不会同时加载这30张图片&＃xff0c;只会同时下载10张&＃xff08;具体几张看浏览器机制&＃xff09;。

但a.dajiaochongmanhua.com、b.dajiaochongmanhua.com、c.dajiaochongmanhua.com各有10张却会同时下载30张。

且还有一个好处不会携带COOKIE&＃xff0c;减少请求头大小。