技术开发 频道

前端优化利器 Connect-Cachify使用指南

  服务器也可以帮忙!

  除了合并和缩小资源外,还有其他办法。几乎所有的服务器和浏览器都支持 HTTP 压缩 功能。最受欢迎的两种压缩方案是使用 deflate 和 gzip。在数据被服务器传送到客户端前,这两种方案都使用了高效的压缩算法来压缩被传送的资源以达到减少传送数据的目的。

  缓存

  拼接(Concatenation)和压缩(Compression)可以改善用户的第一次访问。缓存(Caching)优化了用户的回访。HTTP协议提供了两种方式实现缓存机制,缓存头和ETags。

  缓存头可以缓存经常修改的资源。它包含两个部分:Expires和Cache-Control:max-age。Expires标记过期时间,此后的访问将重新请求资源。max-age表示资源的有效秒数。当带有缓存头时,浏览器只会在缓存头过期后重新请求资源。

  ETag表示资源的版本,用于与服务器比对是否相同。它适用于任意改变的内容资源。资源的ETag头告诉浏览器“去问问服务器有同人没,如果有就不改写啦!”。但是ETag还需要和服务器交互,不太适用于完全缓存的资源。

  缓存破坏

  相对于ETag,基于时间的Cache-Control头的优势在于只在过期后请求资源。但这也是最大的缺陷。如果资源改变了(但缓存头没过期),我们需要一些方法破坏缓存。

  破坏缓存通常的方法是资源URL添加版本号。URL的改变会抛弃原有的缓存头重新请求资源。

  例如资源 http://example.com/logo.png 的缓存头过期时间是一年,但logo更新了。已经缓存logo的用户在一年后才看到新logo。添加版本标识就可以避免这个情况:

  旧的logo

http://example.com/v8125/logo.png

  或者

http://example.com/logo.png?v8125

  更换新logo后,修改版本信息以重新请求资源

http://example.com/v8126/logo.png

  或者

http://example.com/logo.png?v8126

  Connect-cachify —— 一个用来服务串联和缓存资源的NodeJS库

  Connect-cachify 是一个由Mozilla开发的NodeJS中间件,用来简化提供正确的链接和缓存的资源的任务。

  在生产模式下,Connect-cachify提供带一年高速缓存的生产资源的预生成。如果不在生产模式下,取而代之的则是个人开发资源来避免调试变得复杂。Connect-cachify自己不进行字串串联和极简化,全靠你在构建脚本中进行。

0
相关文章