前端性能优化之道，最重要的当然是缓存。用好缓存对项目有很大的帮助。比如我们访问一个网页，使用网页返回功能，会发现加载速度非常快，体验非常好。这就是缓存的力量。什么是缓存？当我们第一次访问一个网站时，比如juejin.cn，电脑会把网站上的图片和资料下载到电脑上。当我们再次访问该网站时，该网站将直接从计算机加载。这是缓存。缓存有什么好处？1.缓解服务器压力，无需每次都请求某些数据。2.为了提高性能，打开本地资源肯定会比请求服务器更快。3.减少带宽消耗。当我们使用缓存时，只会产生很小的网络消耗。至于为什么打开本地资源也会产生网络消耗，下面会解释。Web缓存类型：数据库缓存、CDN缓存、代理服务器缓存、浏览器缓存。所谓浏览器缓存，其实是指在本地使用的电脑中开辟一块内存区域，同时也开辟一块硬盘区域作为数据传输的缓冲区，然后用这个缓冲区来临时保存用户访问过的信息前。浏览器缓存进程：强缓存、协商缓存。浏览器缓存位置一般分为四类：ServiceWorker-->MemoryCache-->DiskCache-->PushCache。1、强缓存强缓存是指当我们访问一个URL时，不会向服务器发送请求，直接从缓存中读取资源，而是返回一个200的状态码。如何设置强缓存呢？我们第一次进入页面，请求服务器，然后服务器响应。浏览器会根据响应头判断是否缓存该资源。如果响应头中的expires、pragma或cache-control字段表明这是一个强缓存，浏览器会将资源缓存在内存缓存或磁盘缓存中。第二次请求时，浏览器判断请求参数，如果满足强缓存条件，则直接返回状态码200，并从本地缓存中取数据。否则，将响应参数存储在请求头中，看是否符合协商缓存。如果是，则返回状态码304。如果不是，服务器将返回一个新的资源。expires是HTTP1.0控制网页缓存的字段。该值是一个时间戳，准确地说是格林威治标准时间。服务端返回请求结果缓存的过期时间，意思是再次发送请求时，如果没有超过过期时间，直接使用这个缓存，过期则重新请求。有一个缺点，就是它判断是否过期是使用本地时间，可以自行修改。Cache-Control是HTTP1.1中控制网页缓存的字段。当两个Cache-Control都存在时，Cache-Control的优先级更高。主要值有：public：资源客户端和服务端可以缓存。private：只有客户端可以缓存资源。no-cache：客户端缓存资源，但是否缓存需要协商缓存验证。no-store：不使用缓存。max-age：缓存保质期。Cache-Control使用max-age相对时间来解决expires问题。pragma是HTTP1.0中禁用网页缓存的字段，取值为no-cache，与Cache-Control的no-cache作用相同。2.缓存位置上面我们说了强缓存，我们会将资源房间放在内存缓存和磁盘缓存中，那么什么资源应该放在内存缓存中，哪些资源应该放在磁盘缓存中呢？存储图片、网页等资源主要缓存在磁盘缓存中，操作系统缓存文件等大部分资源缓存在内存缓存中。具体操作是浏览器自动分配，资源利用率不高的分配给谁。可以看出内存缓存请求时间为0ms。这很神奇吗？让我梳理一下这方面。查找浏览器缓存时，会依次查找：ServiceWorker-->MemoryCache-->DiskCache-->PushCache。1、ServiceWorker是运行在浏览器后面的独立线程，一般可以用来实现缓存功能。使用ServiceWorker时，传输协议必须是HTTPS。因为ServiceWorker中涉及到请求拦截，所以必须使用HTTPS协议来保证安全。ServiceWorker的缓存不同于浏览器内置的其他缓存机制。它可以让我们自由控制缓存哪些文件，如何匹配缓存，如何读取缓存，缓存是持久化的。2、内存缓存内存中的缓存主要包括当前页面已经抓取的资源，比如页面已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快。内存缓存虽然读取效率高，但是缓存持续时间很短，会随着进程的释放而释放。一旦我们关闭Tab页面，内存中的缓存就被释放了。3.磁盘缓存存储在硬盘中的缓存读取速度较慢，但??一切都可以存储在磁盘上。与MemoryCache相比，在容量和存储时效性上更胜一筹。在所有的浏览器缓存中，DiskCache的覆盖范围基本上是最大的。它会根据HTTPHerder中的字段判断哪些资源需要缓存，哪些资源可以不用请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站的情况下，一旦相同地址的资源被硬盘缓存，就不会再请求数据了。大多数缓存来自磁盘缓存。内存缓存比磁盘缓存快得多。例如：直接从远程Web服务器获取和访问一个文件可能需要500毫秒（半秒），那么磁盘访问可能需要10-20毫秒，而内存访问只需要100纳秒，更高级的L1缓存访问（最快速和最小的CPU缓存）只需要0.5ns。神奇的是，我们又看到了一个prefetchcache，这是什么？prefetchcache（预取缓存）在链接标签上有prefetch，再次加载时会出现。Prefetch是一种预加载的方式。标记为预取的资源将在空闲时间由浏览器加载。4.PushCachePushCache（推送缓存）就是HTTP/2中的内容。当上面三个缓存都没有命中时才会使用。它只存在于会话（Session）中，一旦会话结束即被释放，而且缓存时间也很短，在Chrome浏览器中只有5分钟左右，并且没有严格执行HTTP头中的缓存指令。5.CPU、内存、硬盘这里说到硬盘和内存。有些朋友可能对硬盘和内存没有一个直观的概念。CPU、内存和硬盘是计算机的主要组成部分。CPU：CentralProcessingUnit（中央处理单元）的缩写，也叫处理器，是计算机的计算核心和控制核心。计算机依靠中央处理器进行计算和控制。让计算机的各个部件顺利工作，起到协调和控制的作用。硬盘：存储数据、软件等数据的设备。具有容量大、断电不丢失数据等特点。内存：负责硬盘等硬件上的数据与CPU之间的数据交换处理。特点是体积小，速度快，带电存储，断电清除，即开机时数据可以存储在电脑内存中，里面的所有数据会自动清除关闭后。3.协商缓存协商缓存是强缓存失效后，浏览器以缓存ID向服务器发送请求，服务器根据缓存ID决定是否使用缓存的过程。主要有以下两种情况：协商缓存生效，返回304协商缓存失败，返回200和请求结果。如何设置协商缓存？Last-Modified/If-Modified-SinceLast-Modified是服务器响应请求并返回资源文件在服务器上最后修改的时间。If-Modified-Since表示客户端再次发起请求时，携带上次请求返回的Last-Modified值，通过该字段值告诉服务器上次请求返回的资源的最后修改时间。当服务器收到请求，发现请求头中包含If-Modified-Since字段时，就会将If-Modified-Since字段的值与资源在服务器上的最后修改时间进行比较。如果资源在服务器上的最后修改时间大于如果设置了If-Modified-Since的字段值，则返回该资源，状态码为200；否则返回304，表示资源没有更新，可以继续使用缓存文件。Etag/If-None-MatchEtag是服务器响应请求时返回当前资源文件的唯一标识符（由服务器生成）。If-None-Match表示客户端再次发起请求时，携带上次请求返回的唯一标识Etag值，通过该字段值告诉服务端上次请求该资源返回的唯一标识值。服务器收到请求后，发现请求头中包含If-None-Match，就会将If-None-Match的字段值与服务器上资源的Etag值进行比较。如果匹配则返回304，表示资源没有更新。,继续使用缓存文件；如果不一致，重新返回资源文件，状态码为200。Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since，只有Etag/If-None-Match会如果它们同时存在则生效。4、缓存方案目前的项目大多采用这种缓存方案：HTML：negotiationcaching；css、js、图片：强缓存，文件名带hash。五、强缓存和协商缓存的区别1、强缓存不会向服务器发送请求，所以有时候浏览器不知道资源什么时候更新，但是协商缓存会向服务器发送请求，所以服务器肯定知道是否资源已更新。2.大多数网络服务器默认启用协商缓存。六、刷新对强缓存和协商缓存的影响1、ctrl+f5强制刷新网页时，会直接从服务器加载，跳过强缓存和协商缓存。2、f5刷新网页时，跳过强缓存，而是检查协商缓存。3.在浏览器地址栏中输入网址，回车。浏览器发现缓存中存在该文件，就不用继续请求了，直接去缓存中获取。（最快的）
