读 中高级前端工程师都需要熟悉的技能--前端缓存 有感 juejin.cn/post/712719…

观后感

前端缓存是提高网站性能和用户体验的重要手段之一。在前端中，我们可以通过设置HTTP头部信息来控制缓存的行为，常用的头部信息包括Cache-Control、Expires、Last-Modified、ETag等。同时，我们需要注意缓存的正确性、时效性和容量，以保证缓存的有效性。在使用前端缓存时，我们需要根据具体的业务场景和数据特点来设置缓存策略，避免缓存的数据不一致或者过期导致的问题。

从前端的角度来说，前端缓存主要包括浏览器缓存和本地缓存。浏览器缓存可以分为强缓存和协商缓存两种方式，强缓存是指从本地缓存中直接获取数据，而协商缓存是通过设置特定的HTTP头部信息来判断缓存是否可用。在前端中，我们可以通过使用localStorage或者sessionStorage等本地缓存技术来实现数据的持久化存储。

举个例子，假设我们有一个需求，需要在网页中显示用户的最近访问记录。如果每次都要向服务器发送请求，获取最近访问记录的数据，那么网页的加载速度将会很慢，用户体验也会受到影响。这时，我们可以使用localStorage来实现数据的本地缓存。当用户第一次访问网页时，我们可以将最近访问记录保存在localStorage中，当用户再次访问网页时，直接从localStorage中获取数据，而不必再向服务器发送请求，从而提高网页的加载速度和用户体验。

从后端的角度来说，前端缓存主要包括服务器端缓存和浏览器端缓存。在服务器端，我们可以使用页面缓存、对象缓存、查询缓存等缓存技术来优化Web应用程序的性能。在浏览器端，我们可以通过设置HTTP头部信息来控制浏览器缓存。通过合理使用前端缓存，我们可以减少向服务器发送请求的次数，提高网站的性能和用户体验。

举个例子，假设我们有一个Web应用程序，需要根据用户的输入进行查询，返回查询结果。如果每次都要重新计算查询结果，那么Web应用程序的性能将会很差。这时，我们可以使用对象缓存来缓存查询结果，当用户再次进行相同的查询时，直接从缓存中获取结果，而不必重新计算，从而提高Web应用程序的性能和用户体验。同时，我们可以使用页面缓存来缓存整个Web页面，从而减少页面加载的时间，提高用户的访问速度和体验。

需要注意的是，缓存的正确性、时效性和容量是前端缓存的关键问题。如果缓存的数据不一致或者过期，那么将会导致应用程序的错误行为。因此，我们需要根据具体的业务场景和数据特点来设置缓存策略，保证缓存的有效性和正确性。另外，缓存的容量也需要根据实际情况来设置，避免缓存数据过多导致浏览器性能的下降。

总之，前端缓存是提高网站性能和用户体验的重要手段之一。在前端中，我们可以通过设置HTTP头部信息来控制缓存的行为，常用的头部信息包括Cache-Control、Expires、Last-Modified、ETag等。同时，我们需要注意缓存的正确性、时效性和容量，以保证缓存的有效性。在使用前端缓存时，我们需要根据具体的业务场景和数据特点来设置缓存策略，避免缓存的数据不一致或者过期导致的问题。通过合理使用前端缓存，我们可以大大提高网站的性能和用户体验，让用户不再为缓慢的网站而烦恼。

在上述代码中，我们通过设置Cache-Control和Expires头部信息来实现强缓存。当浏览器再次请求同样的资源时，会从本地缓存中获取数据，而不必向服务器发送请求。

在上述代码中，我们通过设置Last-Modified和ETag头部信息来实现协商缓存。当浏览器再次请求同样的资源时，会向服务器发送If-None-Match和If-Modified-Since头部信息，服务器会根据这些信息来判断是否需要返回304 Not Modified状态码，表示缓存可用。

需要注意的是，不同的缓存策略有不同的实现方式，以上示例只是一种常见的实现方式，具体实现应该根据具体场景进行调整。