1.HTTP缓存http请求是影响前端性能的一个极其重要的部分，因为请求受网络的影响很大。如果网速慢，页面可能会长时间空白。对于初次进入网站的用户，可通过优化界面性能和界面数量来解决。但是对于重复进入页面的用户来说，除了浏览器缓存之外，http缓存可以在很大程度上优化已经加载过的页面。1.缓存位置从缓存位置来看，有4种。从上到下检查是否有命中。如果都没有命中，则重新发起请求。ServiceWorker是运行在浏览器后面的独立线程，一般可以用来实现缓存。使用ServiceWorker时，传输协议必须是HTTPS。MemoryCache也就是内存中的缓存，主要包括当前页面已经抓取的资源，比如页面已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快。内存缓存虽然读取效率高，但是缓存持续时间很短，会随着进程的释放而释放。一旦我们关闭Tab页面，内存中的缓存就被释放了。memorycache中一个重要的缓存资源是preloader相关指令下载的资源（例如）。它可以在从网络请求下一个资源的同时解析js/css文件。磁盘缓存也是存储在硬盘上的缓存。读取速度较慢，但??一切都可以存储在磁盘上。与MemoryCache相比，在容量和存储时效性上更胜一筹。大部分缓存来自DiskCache，在HTTP协议头中设置。PushCache（推送缓存）就是HTTP/2中的内容。当上面三个缓存都没有命中时才会使用。它只存在于会话（Session）中，一旦会话结束即被释放，而且缓存时间也很短，在Chrome浏览器中只有5分钟左右，并且没有严格执行HTTP头中的缓存指令。2、用户操作对缓存的影响下面主要说一下前端优化可以入手的地方，即强缓存和协商缓存，缓存策略是通过设置HTTPHeader来实现的。3、强缓存浏览器在第一次访问接口后会在响应头中携带一些字段。这些字段决定了这个请求的缓存状态。强缓存相关的头域有两个：1.expires：过期网红，这是http1.0的规范；它的值是绝对时间的GMT格式的时间字符串，比如Mon,10Jun201521:31:12GMT，如果发送请求的时间在expires之前，那么本地缓存一直有效，否则会向服务器发送请求获取资源2、cache-control:newstar:max-age=number，这是http1中出现的header信息。判断，是相对值；资源的首次请求时间和Cache-Control设置的有效期计算出一个资源过期时间，然后将过期时间与当前请求时间进行比较，如果请求时间在过期时间之前，则可以命中缓存,否则将不起作用；no-cache：不使用本地缓存。需要使用协商缓存，先和服务器确认返回的response是否被改变，如果之前的response中有ETag，那么请求会和服务器验证，如果资源没有被改变，你可以避免重新下载。no-store：直接禁止浏览器缓存数据。用户每次请求资源时，都会向服务器发送一个请求，每次都会下载完整的资源。public：可以被所有用户缓存，包括终端用户和CDN等中间代理服务器。private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器缓存。注意：如果cache-control和expires同时存在，cache-control的优先级高于expiresstrongcacheperiodhit，直接从缓存中返回数据，返回值为200；在此期间，无论界面内容是否发生变化，都不会请求更新。4.协商缓存当没有强缓存时，会向服务器求助，即询问服务器是否有变化，从接口判断是否有缓存。如果命中协商缓存，返回304状态码，本地返回缓存内容。如果没有命中，则重新发起请求。协商缓存需要通过特殊标记与服务器连接，即第一个请求的响应头携带一个字段（Last-Modified或Etag），后续请求将携带相应的请求字段（If-Modified-Since或If-None-Match)，如果响应头中没有Last-Modified或Etag字段，则请求头中不会有对应的字段。具体过程如下：Last-Modified/If-Modified-Since1、浏览器第一次向服务器请求一个资源，在响应头中加入Last-Modified：表示最后一次修改时间服务器上的资源2.浏览器再次联系服务器当服务器请求这个资源时，在请求头中添加If-Modified-Since头：上次请求返回的Last-Modified值3.当服务器再次收到资源请求，会判断上次修改时间是否有变化，如果没有变化，则返回304NotModified，但不返回资源内容；如果有变化，会正常返回资源内容，Last-Modified会修改为最新的值。如果没有变化，服务器返回304NotModified，Last-Modified不会被修改，Last-Modified头也不会添加到响应header4中。浏览器收到304响应后，会从缓存中加载资源Etag/If-None-Match是服务器生成的每个资源的唯一标识字符串。只要资源改变，这个值就会改变；判断过程与Last-Modified/If-Modified-Since类似，与Last-Modified不同的是，当服务端返回304NotModified响应时，由于ETag已经重新生成，响应头会返回ETag，即使ETag与前一个相比没有变化。1、有些文件可能会周期性的改变，但其内容不会改变（只有修改后的修改时间）。这个时候，我们不希望客户端认为文件被修改了，重新GET；2.有些文件修改非常频繁，比如一秒内修改（比如1s内修改N次），If-Modified-Since可以查到的粒度是s级，无法判断这个修改（或者UNIX记录MTIME只能精确到秒）；3、部分服务器无法准确获取文件的最后修改时间。Last-Modified和ETag可以一起使用。服务器会先验证ETag。如果一致，则继续比较Last-Modified，最后决定是否返回304。2、浏览器本地存储最常用的浏览器本地缓存有cookie、localStroage、sessionStroage、webSql、indexDB。1、cookies的使用非常简单。可以通过服务器设置，也可以通过js设置documnet.cookie="name=value;"（不要忘记用;分隔）。cookie的值字符串可以使用encodeURIComponent()来确保它不包含任何逗号、分号或空格（cookie值中禁止使用这些值）。Cookies一般用于保存登录状态、密码、个人信息等关键信息，所以为了安全起见，也遵循同源策略的原则。具体可以通过以下参数设置：;path=path(eg'/','/mydir')如果不定义，默认为当前文档所在的路径。;domain=domain(e.g.'example.com','subdomain.example.com')如果未定义，则默认为当前文档位置路径的域部分。与早期规范相反，在域名前加上.字符将被忽略，因为浏览器可能会拒绝设置此类cookie。如果指定域，则还包括子域。;max-age=max-age-in-seconds(e.g.ayearis606024*365);expires=date-in-GMTString-format如果不定义，cookie将在会话结束时过期见Date.toUTCString这个值的格式();secure（cookies只通过https协议传输）；HttpOnly限制网页程序的浏览器端脚本程序读取cookie。缺点是容量有限，不能超过4kb。请求头中的数据安全性差。2、localStorage和sessionStorage使用html5添加的本地存储，localStorage的生命周期是永久的，除非localStorage信息被主动清除，否则信息将永远存在。存储数据的大小一般为5MB，sessionStorage只在当前会话有效，关闭页面或浏览器后会被清除。并且只保存在客户端（即浏览器），不参与与服务端的通信。同样遵循同源策略的原则//1、将数据保存在本地//第一个参数是保存的变量名，第二个是赋给变量的值localStorage.setItem('key','value');//复杂类型存储需要使用**JSON.stringify**将对象转为字符串；//使用**JSON.parse**将字符串转换为对象//2.从本地存储中获取数据localStorage.getItem('key');//3.从本地存储中删除保存的数据localStorage.removeItem('key');//4.清除所有保存的数据localStorage.clear();3.WebSQLWebSQL是一个前端独立模块，是一种web存储方式，我们在调试的时候经常看到，但是很少用到。而且，目前只有Google支持，ie和Firefox都不支持。主要方法：1.openDatabase：该方法使用现有数据库或新数据库创建数据库对象。2.transaction：这个方法可以让我们控制一个事务，根据这个情况进行commit或者rollback。3.executeSql：该方法用于执行实际的SQL查询。4.indexDBIndexedDB是浏览器提供的本地数据库，可以通过web脚本创建和操作。IndexedDB允许存储大量数据，提供查找接口和构建索引。这些在LocalStorage中不可用。就数据库类型而言，IndexedDB不是关系型数据库（不支持SQL查询语句），更接近于NoSQL数据库。
