性能优化之-缓存篇-Toy模板网

这篇具有很好参考价值的文章主要介绍了性能优化之-缓存篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概览

什么是缓存？在哪可以看到？为什么要做？

百度百科可以解释，包含各种方向（缓存）
最常见就是目前看到这篇文章的位置-浏览器，打开F12，

中文汉字很好找；包括硬盘，服务器这些都是它的容器，
缓存的设置是所有现代计算机系统发挥高性能的重要因素之一。

本文简单说下浏览器缓存，当做笔记

在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。

一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

在执行任何查询时，SQL Server都会把数据读取到内存，在使用完数据之后，数据不会被立即删除，而是缓存在内存Buffer中，当再次获取相同的数据时，如果所需数据全部缓存在内存中，那么SQL Server不会产生Disk IO操作（把数据从硬盘导入到内存），而是直接从内存中获取数据。由于查询内存中的数据，速度非常快，SQL Server引擎会立即返回查询结果，缓存数据是是SQL Server的一种性能优化机制。

1 WEB缓存体系

在实际WEB开发过程中，缓存技术会涉及到不同层、不同端，比如：用户层、系统层、代理层、前端、后端、服务端等，每一层的缓存目标都是一致的，就是尽快返回请求数据、减少延迟，但每层使用的技术实现是各有不同，面对不同层、不同端的优劣，选用不同的技术来提升系统响应效率。所以，我们首先看下各层的缓存都有哪些技术，都缓存哪些数据，从整体上，对WEB的缓存技术进行了解，如下图所示：
性能优化之-缓存篇,性能优化,js,笔记,性能优化,缓存,前端

2 认识浏览器缓存

当浏览器请求一个网站的时候，会加载各种各样的资源，比如：HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容，浏览器会将他们保存在本地的文件中，下次访问相同网站的时候，直接加载这些资源，加速访问。

这些被浏览器保存的文件就被称为缓存（不是指Cookie或者Localstorage）。

第一次打开该网站后，如果再次刷新页面。会发现浏览器加载的众多资源中，有一部分size有具体数值，然而还有一部分请求，
性能优化之-缓存篇,性能优化,js,笔记,性能优化,缓存,前端
浏览器启用缓存至少有两点显而易见的好处：
（1）减少页面加载时间；
（2）减少服务器负载；

浏览器是否使用缓存、缓存多久，是由服务器控制的。准确来说，当浏览器请求一个网页（或者其他资源）时，服务器发回的响应的「响应头」部分的某些字段指明了有关缓存的关键信息。下面看下，HTTP报文中与缓存相关的首部字段：

通用首部字段（就是请求报文和响应报文都能用上的字段）
请求首部字段
响应首部字段

性能优化之-缓存篇,性能优化,js,笔记,性能优化,缓存,前端
4. 实体首部字段

3 浏览器缓存机制

根据上面四种类型的首部字段不同使用策略，浏览器中缓存可分为强缓存和协商缓存：、

1.强缓存：

强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的。其中Expires是HTTP
1.0中定义的，它指定了一个绝对的过期时期。而Cache-Control是HTTP 1.1时出现的缓存控制字段。Cache-Control:max-age定义了一个最大使用期，就是从第一次生成文档到缓存不再生效的合法生存日期。由于Expires是HTTP1.0时代的产物，因此设计之初就存在着一些缺陷，如果本地时间和服务器时间相差太大，就会导致缓存错乱。这两个字段同时使用的时候Cache-Control的优先级给更高一点。
这两个字段的效果是类似的，客户端都会通过对比本地时间和服务器生存时间来检测缓存是否可用。如果缓存没有超出它的生存时间内，客户端就会直接采用本地的缓存。如果生存日期已经过了，这个缓存也就宣告失效。接着客户端将再次与服务器进行通信来验证这个缓存是否需要更新。

2.协商缓存

强缓存机制如果检测到缓存失效，就需要进行服务器再验证。这种缓存机制也称作协商缓存。浏览器在第一次获取请求的时候，就会在响应头中携带上资源的上次服务器修改日期(Last-Modified)或者资源的标签（Etag)。后续的请求服务器会根据请求头上的If-Modified-Since（对应Last-Modified）和（If-None-Match)字段来判断资源是否失效，一旦资源过期，则服务器会重新发送新的资源到客户端上，从而保证资源的有效性。
其中Last-Modified字段对应的是资源最后修改时间，例如：Last-Modified: Sat, 30 Dec 2017 20:18:56 GMT ，当客户端再次请求该资源的时候，会在其请求头上附带上If-Modified-Since字段，值就是之前返回的Last-Modified值。如果资源未过期，命中缓存，服务器就直接返回304状态码，客户端直接使用本地的资源。否则，服务器重新发送响应资源。
另外一种协商缓存的校验方式的通过校验码而不是时间，这样就保证了在文件内容不变的情况下不会重复占用网络资源。响应头中Etag字段是服务器给资源打上的一个标记，利用这个标记就可以实现缓存的更新。后续发起的请求，会在请求头上附带上If-None-Match字段，其值就是这个标记的值。
需要注意的是当响应头中同时存在Etag和Last-Modified的时候，会先对Etag进行比对，随后才是Last-Modified。

3.机制

1）浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如：某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；
2）当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；
3）强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。
4）当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。