22、网页性能优化全攻略：缓存、CDN与JavaScript优化

网页性能优化全攻略：缓存、CDN与JavaScript优化

1. 理解网页缓存

1.1 ETag机制

浏览器会将缓存响应的ETag发送给服务器，服务器通过算法根据可用内容生成ETag，并与浏览器发送的ETag进行比较。若两者不匹配，则表明内容已更改，服务器会决定向浏览器发送最新内容。

例如，在缓存RSS订阅源时，可以使用订阅源中最后一项的哈希值作为ETag。当用户再次请求相同的订阅源时，浏览器会向服务器发送已知的ETag。服务器下载或生成RSS，检查最后一项的哈希值并与ETag比较。若匹配，返回HTTP 304通知浏览器使用缓存内容；否则，返回新下载的订阅源。

1.2 充分利用缓存的原则

1.2.1 一致使用URL

浏览器基于URL缓存内容，URL变化时会从源服务器获取新内容。查询字符串参数的改变会导致URL变化，如请求 /default.aspx?123 会获取新内容。若返回正确的缓存头，新URL的响应也会被缓存，再次更改查询参数（如 /default.aspx?456 ）又会获取新内容。因此，若想获取缓存响应，需在各处一致使用URL，避免遗漏“www”子域名等错误。

1.2.2 长时间缓存静态内容

静态文件可长时间缓存，如一个月。若使用 Expires 头缓存文件，设置较低的过期时间并不能确保所有用户及时获取最新文件，不同用户看到的文件版本可能不同。若要更改静态文件，需更改文件名并更新所有引用，也可将文件名存储在数据库或配置文件中，通过数据绑定动态生成URL。