本文原链接:https://blog.csdn.net/zhouziyu2011/article/details/71312452

浅谈前端性能优化(一)——Expires和Cache-Control

前端性能优化中,减少HTTP请求可以提高页面的响应速度。

浏览器在第一次访问页面时向服务器请求资源,并缓存起来,下次再访问时会判断在缓存中是否已有该资源且有没有更新过,如果已有该资源且未更新过,则直接从浏览器缓存中读取。原理:通过HTTP 请求头中的 If-Modified-Since(If-No-Match) 和响应头中的Last-Modified(ETag)来实现,HTTP请求把 If-Modified-Since(If-No-Match)传给服务器,服务器将其与Last-Modified(ETag)对比,若相同,则文件没有被改动过,则返回304,直接浏览器缓存中读取资源即可。

问题:虽然该方法减少了已缓存资源的下载时间,但仍然发起了一次http请求。

解决:已缓存资源不再发起http请求,即HTTP的Expires和Cache-Control。对一个网站而言,CSS、JavaScript、图片等静态资源更新的频率都比较低,而这些文件又几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,将静态内容设为永不过期,或者很长时间后才过期。

1、Cache-Control

Cache-Control属性是在服务器端配置的,不同的服务器有不同的配置,apache、nginx、IIS、tomcat等配置都不尽相同。

以Apache为例,在http.conf中做如下配置:

<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>
Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch ”.(css|js)$”>
Header set Cache Control max-age=2628000,public
</filesMatch>

问题:浏览器缓存的资源,若又想更新资源,如何实现?

解决:通过修改该资源的名称来实现。修改了资源名称,浏览器会当做不同的资源。

2、Expires

Expires属性也是在服务端配置的,具体的配置也根据服务器而定。

问题:可能存在客户端时间跟服务端时间不一致的问题。

解决:建议Expires结合Cache-Control一起使用。

3、测试实例:

1) 未使用expires和cache-control的测试demo:

打开网址:http://stevesouders.com/hpws/expiresoff.php

2) 使用expires和cache-control的测试demo:

打开网址:http://stevesouders.com/hpws/expireson.php

Expires和Cache-Control的更多相关文章

  1. [转]ASP.NET Core: Static Files cache control using HTTP Headers

    本文转自:https://www.ryadel.com/en/asp-net-core-static-files-cache-control-using-http-headers/ Every sea ...

  2. 网站 cache control 最佳实践

    推荐阅读: 2020年软件开发趋势 高并发案例 - 库存超发问题 负载均衡的分类及算法 异地多活架构 Postman 的替代品来了 有时,当第二次访问网站时,看起来比较怪,样式不正常. 通常,是因为 ...

  3. Symfony2学习笔记之HTTP Cache

    富web应用程序的本质意味着它们的动态.无论你的应用程序多么有效率,每个请求比起静态文件来说总会存在很多的耗费.对于大多数web程序来说,这没什么. Symfony2非常的轻快,无论你做些严重超载的请 ...

  4. http缓存提高性能

    秋招也算是正式结束了,现在整理一下笔记,当作巩固一下知识,也希望这个对大家有帮助 http 缓存 和 cdn 缓存可以说是面试必问的问题,竟然是必问的问题,那就总结全面一点- http缓存机制 缓存分 ...

  5. HTTP请求中的缓存(cache)机制

    http://www.chaorenmao.com/blog/?p=79 流程 当资源第一次被访问的时候,HTTP头部如下 (Request-Line)  GET /a.html HTTP/1.1Ho ...

  6. 前端性能优化:Add Expires headers

    前端性能优化:Add Expires headers Expires headers 是什么? Expires headers:直接翻译是过期头.Expires headers 告诉浏览器是否应该从服 ...

  7. Method, apparatus, and system for speculative abort control mechanisms

    An apparatus and method is described herein for providing robust speculative code section abort cont ...

  8. [INet] 借助 HTTP Cache 加速应用响应

    背景: GET 访问一个应用的时候,内容一般都不会时刻在变,如何让下一个人请求时极速获取响应过的内容,并且在内容发生变更时能够识别出来. 在应用层做 Cache 是一种方法,但是依旧要响应整个 Bod ...

  9. NGINX Cache Management (.imh nginx)

    In this article, we will explore the various NGINX cache configuration options, and tips on tweaking ...

随机推荐

  1. NOIP2015提高组 跳石头 ACM-ICPC2017香港 E(选择/移除+二分答案)

    跳石头 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 NN  ...

  2. Codeforces Round #360 (Div. 1)A (二分图&dfs染色)

    题目链接:http://codeforces.com/problemset/problem/687/A 题意:给出一个n个点m条边的图,分别将每条边连接的两个点放到两个集合中,输出两个集合中的点,若不 ...

  3. 【BZOJ 2243】染色

    传送门:洛谷   BZOJ 还不会LCT的小伙伴可以看一下这篇博客:LCT总结 我初学动态树时就是看着那篇博客学的,写的很好! 那好 言归正传. 显然树上 x 到 y 的路径的问题都可以用LCT Ac ...

  4. PAT甲级——1107 Social Clusters (并查集)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90409731 1107 Social Clusters (30  ...

  5. 【考试记录】Educational Codeforces Round 59 (Rated for Div. 2)

    本来准备划水,结果被垃圾题艹翻了…… T2题意: 定义一个数$x$的数字根$S(x)$为:将其各位数字相加得到一个新数,再将新数的数字和相加直到得到一个个位数,就是该数的数字根. 例如:$S(38)= ...

  6. bzoj1822: [JSOI2010]Frozen Nova 冷冻波网络流

    思路比较显然:二分答案,流流流 但是实现的时候感觉自己数学捉急.. 一开始算了个直线到点距离.... 应该是线段到点距离 #include <bits/stdc++.h> #define ...

  7. Jmeter JDBC Request的使用

    1. JDBC Request 这个Sampler可以向数据库发送一个jdbc请求(sql语句),并获取返回的数据库数据进行操作.它经常需要和JDBC Connection Configuration ...

  8. net Core 2.0应用程序发布到IIS

    .net Core 2.0应用程序发布到IIS上注意事项   .net Core2.0应用程序发布window服务器报错容易错过的配置. 1.应用程序发布. 2.IIS上新建网站. 3.应用程序池选择 ...

  9. E. Selling Souvenirs 不会做

    http://codeforces.com/contest/808/problem/E 不理解为什么dp = {cost, cnt1, cnt2}可以 而dp = {cost, cnt1, cnt2, ...

  10. Java中的break循环——通过示例学习Java编程(13)

    作者:CHAITANYA SINGH 来源:https://www.koofun.com//pro/kfpostsdetail?kfpostsid=24 break语句通常用于以下两种情况: (A)使 ...