前端性能优化-HTTP添加Expires头和Cache-Control

转载自：https://www.jianshu.com/p/f331d5f0b979

浏览器在第一次加载网页后会进行缓存，在第二次以及以后加载时会快一点。但是之后还需要向服务器进行请求，看这期间网页有没有修改过，如果没有修改过就直接用缓存的，但是这样还是会进行一次http请求。 if-modified-since 和Response Headers中的last-modified来实现。
所以添加Expires头和Cache-Control用来节省这一次http请求以达到更快。

使用Cache-Control：
Cache-Control属性值是在server端配置的，不同的服务器有不同的配置，web服务器 apache、nginx、IIS,应用服务器tomcat等配置都不尽相同；以Apache为例，在http.conf中做如下配置：

第一段代码是指jgp/jepg/png/gif/ico等类型的文件缓存1年。单位是秒，你可以自己算算。第二段代码是指css和js这种文件类型缓存1个月。通常来说一些长期不变的图片比如logo，背景图片，字体，icon小图标等变化一般不会频繁，可以设的久一点。可以设个一年半载，具体设多久见仁见智了。新闻，广告等频繁更新的图片，不用缓存。css，js文件更新的周期会短一点，可以设置一周或者一个月。

如果用户浏览器缓存了页面的资源，你又想让用户更新怎么办呢？你可以通过修改该资源的名称来实现。名字改了，浏览器会当做不同的资源，这样就可以实现了。在大型项目中不可能频繁的更新文件名，要通过全局的配置文件版本的方法。

Expires的使用机制
expires也是需要在服务端配置（具体配置也根据服务器而定），expires添加的是该资源过期的日期，浏览器会根据该过期日期与客户端时间对比，如果过期时间还没到，则会去缓存中读取该资源，如果已经到期了，则浏览器判断为该资源已经不新鲜要重新从服务端获取。通过这种方式，可以实现直接从浏览器缓存中读取，而不需要去服务端判断是否已经缓存，避免了这次http请求。值得注意的是expires时间可能存在客户端时间跟服务端时间不一致的问题。所以，建议expires结合Cache-Control一起使用，大型网站中一起使用的情况比较多见。

前端性能优化-HTTP添加Expires头和Cache-Control相关推荐

前端性能优化：Add Expires headers
合理设置 HTTP缓存缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求. 很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ; 变化不频繁而 ...
放在请求头目的_YSLOW性能测试前端调优23大规则（三）添加Expires头
正常如果要访问的组件,都必须建立相对应的HTTP请求从服务器端查找所需要的组件,这样每次访问都得重新从服务器读取信息,为了提高性能我们想出一种方法,如果可以使用浏览器或代理的缓存来减少HTTP请求的数 ...
前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军 ...
前端性能优化 -- 从 10 多秒到 1.05 秒
关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军规,本文会结合雅虎军规融入自己的了解 ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
1.5W+字的全链路前端性能优化送给你
点击上方"前端开发博客",选择"星标" 回复"加群",加入我们一起学习通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现 ...
（译）2019年前端性能优化清单 — 中篇
(译)2019年前端性能优化清单 - 上篇 (译)2019年前端性能优化清单 - 中篇 (译)2019年前端性能优化清单 - 下篇目录资源优化 17. 使用 Brotli 或 Zopfli 进行纯 ...
WEB前端性能优化，提高页面加载速度
可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...
如何全链路进行前端性能优化
" 如果对性能优化很有兴趣的可以参加文末的送书活动 " 1. 概述通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中,通过各种优化策略和优化方法让页 ...

前端性能优化-HTTP添加Expires头和Cache-Control

前端性能优化-HTTP添加Expires头和Cache-Control相关推荐

最新文章

热门文章