浏览器缓存

前言 基本HTML加载，需要 20ms 左右 Nginx配置，关闭 keepalive、etag、gzip、if_modified_since 协议：HTTP/1.1 浏览器：Chrome 减少HTTP请求 加载未合并外部css，需要 35ms 左右 加载合并外部css，需要 25ms 左右 两个合并后的css，加载减少了10ms，如果将页面所有的css、js、图片（CSS sprites ）合并，减少的时间将很可观。 DOM以及CSS 上图是浏览器解析HTML和渲染树之间的流程。浏览器在获取到HTML页面后开始解析页面，解析到head标签后，发现外部CSS，会异步发出请求，CSS获取后，解析CSS。 HTML解析后生成DOM Tree，CSS解析后生成CSSOM Tree， 两者结合开始渲染树。 1、首屏的页面要快速的渲染出来，CSS最好放在页面头部。同时有多个css文件的时候，也要将基本样式放在其他样式之前加载（边获取边渲染）。 2、HTML以及CSS的元素层级要尽量少,加快页面渲染。 3、对于首页，可以将基本样式内联放在头部。（快速渲染，灵活应用） JS 上图是浏览器解析流程，蓝色是样式解析，黄色是JS脚本执行，顺序执行。JS脚本执行会阻塞样式或DOM解析 1、JS脚本放在页面下面，防止阻塞页面渲染。 2、不要在JS里执行长时间的程序。 3、减少JS对DOM的操作

状态码 含义 100 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。 101 服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。 　　只有在切换新的协议更有好处的时候才应该采取类似措施。例如，切换到新的HTTP 版本比旧版本更有优势，或者切换到一个实时且同步的协议以传送利用此类特性的资源。 102 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。 200 请求已成功，请求所希望的响应头或数据体将随此响应返回。 201 请求已经被实现，而且有一个新的资源已经依据请求的需要而建立，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 '202 Accepted'。 202 服务器已接受请求，但尚未处理。正如它可能被拒绝一样，最终该请求可能会也可能不会被执行。在异步操作的场合下，没有比发送这个状态码更方便的做法了。 　　返回202状态码的响应的目的是允许服务器接受其他过程的请求（例如某个每天只执行一次的基于批处理的操作）

MyBatis 提供的缓存机制都是基于Cache 接口而实现，因此我们也可以通过实现该接口创建自定义的缓存实现。 简单来说，在MyBatis开启二级缓存的前提下，通过使用自定义的缓存实现类，使用Redis完成对缓存信息的查询和更新。 先来看一下 maven 依赖，本文使用的是Spring boot框架，依赖信息相对简单清晰。 < dependency > < groupId > org.springframework.boot </ groupId > < artifactId > spring-boot-starter-data-redis </ artifactId > </ dependency > < dependency > < groupId > org.mybatis.spring.boot </ groupId > < artifactId > mybatis-spring-boot-starter </ artifactId > < version > 1.3.2 </ version > </ dependency > 再来看一下具体的实现类， public class RedisCache implements Cache { private static final Logger logger = LoggerFactory.getLogger

通过这篇文章你将学习到在MVC中如何使用输出缓存，业务逻辑我就不多介绍了，主要是Outputcache的基本使用。至于数据缓存还是等我的下一篇文章吧，一步一步来不急的。 输出缓存的使用方法是在Controller 或Action上打[OutPutCache]特性即可。我这里以Action为示例 [OutputCache(Duration = 20 )] // 设置过期时间为20秒 public ActionResult ExampleCache() { var timeStr =DateTime.Now.ToString( " yyyy年MM月dd日 HH时mm分ss秒 " ); ViewBag.timeStr = timeStr; return View(); } 我们在页面上可以很明显地看到： 在20秒时间差距内页面上的时间都不会被改变。他在Response Header中过期时间和上次修改的时间正好相隔20秒。Http StatusCode 304 这个我得简单介绍下，这个页面是缓存在客户端浏览器的，服务器在接收响应时（还没有超过20秒）并没有返回给浏览器一个新的html文档，只是告诉浏览器 No Modified，从本地去读取即可。当然有必要去了解一下304 ，介绍看看这篇文章 http状态码304的介绍 在Controller上加OutputCache特性时

目前感觉大部分所接触过的项目,目标用户几乎都是使用微信浏览器打开的,在一定程度来说,发布测试版还有本地测试的过程中,微信这种怎么也清不掉的缓存真的很烦人. 下面直入正题, 给出清除微信浏览器缓存的终极方法: 登出微信,再重新登录微信. ☆☆☆ 如果嫌麻烦的话, 可以试一下不一定成功的清除缓存方法: 1. 重新刷新几次,知道缓存被刷掉 ☆ 2. 在改变的资源后面加上版本号,也就是例如index.html?v=1234654 ☆☆ <script> if (! window . name ) { var str = Math . random (). toString ( 36 ). substr ( 2 ); // 随机字符串 window . location . href += ‘? S =‘ + str ; // 兼容微信浏览器刷新 window . name = ‘ isreload ‘; // name 属性可设置或返回存放窗口的名称的一个字符串。 } </script> 3. 安卓的可以打开这个网址进行缓存清理: http://debugx5.qq.com/ ☆☆ 4. 使用meta来禁用缓存 ☆ <!-- // 配合 mate禁用 缓存标签，实现禁用浏览器缓存（实现原理，自动刷新） --> < meta HTTP-EQUIV = "pragma" CONTENT =

浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。 报文信息主要分为两部分 1.包含属性的首部(header)--------------------------附加信息（cookie，缓存信息等）与缓存相关的规则信息，均包含在header中 2.包含数据的主体部分(body)-----------------------HTTP请求真正想要传输的部分 为方便理解，我们认为浏览器存在一个缓存数据库,用于存储缓存信息。 在客户端第一次请求数据时，此时缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回后，将数据存储至缓存数据库中。 HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为两大类(强制缓存，对比缓存)： 两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。 1.对于强制缓存来说，响应header中会有两个字段来标明失效规则（Expires/Cache-Control）： Expires 　　Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。 Cache-Control Cache-Control 是最重要的规则。常见的取值有private

当web应用关系复杂，数据表蹭蹭蹭往上涨时，可以将查询后的数据放到内存中进行缓存，下次再查询时，就直接从内存缓存中获取，从而提高响应速度。 CDN通俗点，就是当我们发送一个web请求时，会先经过它一道手，然后它帮我们计算路径，去哪得到这些东东（representations）的路径短且快。这个是网站管理员部署的，所以他们也可以将大家经常访问的representations放在CDN里，这样，就响应就更快了。 代理服务器缓存，其实跟下面即将讲的浏览器缓存性质差不多，差别就是代理服务器缓存面向的群体更广，规模更大而已。即，它不只为一个用户服务，一般为大量用户提供服务，同一个副本会被重用多次,因此在减少相应时间和带宽使用方面很有效。 简而言之，就是，每个浏览器都实现了 HTTP 缓存，我们通过浏览器使用HTTP协议与服务器交互的时候，浏览器就会根据一套与服务器约定的规则进行缓存工作。当我们点击浏览器上‘后退’或者‘前进’按钮时，显得特别有用。 Etag & If-None-Match Etag是属于HTTP1.1属性，是服务器生成返回给前端 当你第一次发起HTTP请求时，服务器会返回一个Etag 当你第二次发起同一个请求时，客户端会同时发送一个If―None-Match，它的值就是Etag（请求的发起是客户端设置） 服务器对比客户端发送来的Etag是否与服务器的相同，相同就返回304

HTTP协议 一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等） 一个属于应用层的面向对象的协议 工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求，Web服务器根据接收到的请求后，向客户端发送响应信息。 需要掌握的要点总结： HTTP 协议虽然很常用，也很复杂，重点记住 GET、POST、 PUT、DELETE 这几个方法，以及重要的首部字段 HTTP 2.0 通过头压缩、分帧、二进制编码、多路复用等技术提升性能 QUIC 协议通过基于 UDP 自定义的类似 TCP 的连接、重试、多路复用、流量控制技术，进一步提升性能 下面开始HTTP详解学习： URL HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。URL是一种特殊类型的URI，包含了用于查找某个资源的足够的信息。 http://www.163.com 是个 URL，叫作统一资源定位符。之所以叫统一，是因为它是有格式的。HTTP 称为协议，www.163.com 是一个域名，表示互联网上的一个位置。有的 URL 会有更详细的位置标识，例如 http://www.163.com/index.html 。 HTTP 请求的准备 第一步浏览器先会将 www.163.com

面试时经常被问到：浏览器访问一个页面的时候背后的步骤是怎样的？ 我往往是把HTTP请求和响应讲了一下。 现在想想，感觉仅仅回答HTTP请求和响应有点太窄了。 所以，这里主要从计算机网络的角度将浏览器访问一个页面的背后的过程进行一个较为详细的解读。 域名->IP 当在浏览器中访问一个网址的时候，首先要做的就是找到域名所对应的服务器的IP地址。 浏览器通常有三个途径来找IP地址。 缓存 。包括浏览器的DNS缓存和OS的DNS缓存。 HOST文件 。浏览器会去本地的HOST文件中寻找域名对应的IP地址。 域名服务器查询 。向本地域名服务器求助（一般是路由器），如果得不到还得向更高层次的域名服务器（根域名服务器、顶级域名服务器、权限域名服务器）求助。本地域名服务器向高级域名服务器查询可以是迭代查询或递归查询。 HTTP 得到服务器的IP地址后，需要向服务器请求所要加载网页的资源（HTML文件、图片等）。 这些资源的请求和获取可以通过HTTP完成。 而HTTP协议位于应用层，其是建立在传输层的TCP协议的基础之上。 想要完成HTTP请求和响应还需要通过TCP建立一个浏览器跟服务器的连接。 TCP连接 HTTP的默认端口是 80 。 HTTPS的默认端口是 443 。 当没有特别指定的时候，服务器的端口就是默认端口。 浏览器的请求方端口是动态端口（范围49152~65535），并不固定。

用户通过浏览器访问网站时，可以通过浏览器缓存静态文件，达到节省带宽和流量、加快网页响应的作用。 通过设置Http头中的Cache-Control和Expires, 可以设置浏览器缓存。 # nginx 配置方法1 location ~ ^/( static )/ { access_log off; expires 30 d; } # nginx 配置方法2 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365 d; } 在网站开发中，静态文件缓存导致修改后静态文件无法及时刷新，可以在静态文件后追加时间戳，即每次都想服务器请求静态资源文件。 但时间戳将导致生产环境的缓存失效，所以可以根据环境区别是否加时间戳。 下面给出Django的伪代码实现： < link rel = "stylesheet" href = "{{ '/style/test.css'|file_stamp }}" > def file_stamp (value, arg=None) : if PRODUCTION == False : return "%s?t=%s" % (value, time()) else : return "%s?v=%s" % (value, get_web_version()) 文章来源: 网站静态文件缓存