缓存

轻松理解HTTP缓存策略

admin 概念 暂无评论 1,196 浏览

上一篇文章我写了koa-static的源码解析，其中用到了HTTP的缓存策略，给返回的静态文件设置了一些缓存的头，比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略：

朋友说：“HTTP里面控制缓存的头(header)太多了，啥Cache-Control，ETag，Last-Modified，一大堆，乱七八糟的，而且之间逻辑关系不强，要掌握基本靠背！”

我有点惊讶：“为什么要去背这个呢？所有的技术都是为了解决问题而存在的，不了解问题而去单纯的学习技术，去，背，去，死记，确实很枯燥，而且效果不好。HTTP缓存策略只是为了解决客户端和服务端信息不对称的问题而存在的，客户端为了加快速度会缓存部分资源，但是下次请求时，客户端不知道这个资源有没有更新，服务端也不知道客户端缓存的是哪个版本，不知道该不该再返回资源，其实就是一个信息同步问题，HTTP缓存策略就是来解决这个问题的。如果我们跳出这种纯粹的技术思维，我们会发现生活中这种信息同步问题也很常见。而我们解决这些问题的思路很多时候都是司空见惯了，如果从这个角度来说，这个问题就很好理解！”

于是我给他讲了一个我小时候租光碟看奥特曼的故事。…

            
Read more

实践带你了解–http缓存

admin web前端 暂无评论 945 浏览

这次文章为了了解http缓存的机制,自己搭建nginx和设置nginx配置
网上的文章其实有很多,但是大部分都是文字表达,缓存这块又比较偏向理论,导致我一开始也是云里雾里的

所以这次我通过截图和步骤图来说明,并且进行文字补充, 不喜欢看文字的话其实看图片就行啦

以下每次截图都是无痕模式的…

                
Read more

聊一聊前端性能优化 CRP

admin web前端 暂无评论 954 浏览

什么是 CRP？

CRP又称关键渲染路径，引用MDN对它的解释：

关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。

优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。…

                
Read more

使用Nginx永久缓存上游Web资产（proxy cache）

admin Nginx 暂无评论 321 浏览

我将描述使Nginx永久（或至少一年）缓存图像所需要做的一切。

在开始之前，您应该了解一件事：我在此处指出的所有内容均已记录在Nginx的官方缓存指南中，但是我很懒，没有读过它，我希望我能为您节省一些你宝贵的时间。

如果您已经在生产中运行Nginx并拥有一定流量，您可能会根据处理请求所需的时间来猜测响应是来自上游服务器而不是来自Nginx缓存的，如果它很慢，那么我们知道作为一个MISS; 另一方面，如果Nginx在缓存中找到响应并进行响应，则为HIT。

为了避免任何猜测，最好让Nginx告诉您何时命中或未命中缓存请求，我们通过为HTTP标头提供缓存状态的状态来做到这一点。您可以选择任何想要的名称，X-Cache-Status就像官方指南建议的那样，我喜欢：

location / {
  # . . . 
  add_header X-Cache-Status $upstream_cache_status;
  # . . .
}

现在，我们可以向服务器发出请求，并查看每个特定请求的缓存实际发生了什么：

$ curl -v localhost:8080
. . . 
>
< HTTP/1.1
…
        
Read more

彻底弄懂浏览器缓存策略

admin web前端 暂无评论 1,855 浏览

Web 缓存介绍

  • Web 缓存是指一个 Web 资源（如 html 页面，图片，js，数据等）存在于 Web 服务器和客户端（浏览器）之间的副本。
  • 缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的 URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
…
            
Read more

进阶必备的网络基础

admin 概念 暂无评论 970 浏览

前言

在不那么遥远的一些年以前，一个在江湖中行走的前端，只需要了解“前端三剑客”就足以找到一份工作。很多前端只限于 CSS，HTML、JS，网络基础，数据结构之类的都不甚了解。不过这个时期的前端也是最受鄙视的时期，这个时期前端的大量工作依赖于后端，且不需要动画效果和交互效果。

现如今前端圈已经发生翻天覆地的变化， Vue，React，ES6，HTML5，CSS3，Webpack,PostCss 等技术层出不穷。作为一个有格局的前端，对网络基础定是要了然于心的。

如果你对网络基础还不太了解，以下的内容可以给你提供一个思路；如果你对此已经了然于心，以下的内容烦请批评指正。

入题

任何事物的诞生，最初都是服务于极少数人的。渐渐地被这极少数人推而广之，我们大众就开始接触了解它，互联网是如此，麻将亦是如此。不管是互联网还是麻将，它们都增强了人与人之间的交流。接下来我会讲以下内容：

  1. 五层因特网协议栈

  2. HTTP 与 HTTPS 的区别

  3. TCP/IP 协议

  4. 三次握手和四次挥手

  5. DNS 域名解析

  6. 五类 IP 地址

  7. 跨域的原因及处理方式

  8. 正向代理和反向代理

  9. CDN 带来的性能优化

  10. HTTP 强缓存&协商缓存

…
            
Read more

分布式系统关注点

admin 架构 暂无评论 914 浏览

…

                
Read more

浏览器缓存看这一篇就够了

admin web前端 暂无评论 843 浏览

浏览器缓存作为性能优化的重要一环，对于前端而言，重要性不言而喻。以前总是一知半解的，所以这次好好整理总结了一下。

1、缓存机制

首先我们来总体感知一下它的匹配流程，如下：

  1. 浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。
  2. 没有命中强缓存规则，浏览器会发送请求，根据请求头的last-modified和etag判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。
  3. 如果前两步都没有命中，则直接从服务端获取资源。

2、强缓存

强缓存：不会向服务器发送请求，直接从缓存中读取资源。

2.1 强缓存原理

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种(暂不分析协商缓存过程)，如下：

  • 第一次请求，不存在缓存结果和缓存标识，直接向服务器发送请求

  • 存在缓存标识和缓存结果，但是已经失效，强制缓存是啊比，则使用协商缓存（暂不分析）

  • 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

那么强制缓存的缓存规则是什么？
当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。

2.1.1、 Expires

缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。也就是说，Expires=max-age + 请求时间，需要和Last-modified结合使用。Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

Expires 是 HTTP/1 的产物，受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

2.1.2、

…
    
Read more

可能是最被误用的 HTTP 响应头之一 Cache-Control: must-revalidate

admin 概念 暂无评论 807 浏览

在 HTTP 客户端（浏览器或者缓存服务器）上，如果某个 URL 对应的缓存过期了，客户端会再次向该 URL 发送一个条件请求（带有If-Modified-Since/If-None-Match请求头），如果服务端（缓存服务器或者源站）返回的状态码是 304（没有响应体），则客户端会根据该304响应所包含的一些响应头（Date、Last-Modified、Cache-Control等）重新计算出这条缓存的过期时间，比如：

HTTP/2 304
Cache-Control: max-age=86400

这样的 304响应，就能让这条缓存重新续命一天；如果返回的状态码是 200，则整条缓存会被新返回的响应体替换掉。无论是哪种情况，这条缓存都重新变的有效了，HTTP 规范里把这一“让过期的缓存重新变的有效”过程，叫做 revalidate，英语翻译过来应该是“使重新生效”。…

    
Read more