HTTP协议原理与代码实践之大纲

此文章讲解 http 的大纲, 这是一个关于 http 的系列文章, 有兴趣完整了解相关内容的可以点个关注或者点个关注, 以防找不到此系列文章 。

废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

一: 前后端对 http 的简单掌握:

 1. 后台开发者(http的认知):
    1. http method? ( 请求的方式 )
    2. http status code? ( http请求状态码 )
    
 2. 前端开发者(http缓存的认知):
    1. http 缓存 ?
    2. 客户端 缓存 ?
    3. 代理服务器 缓存 ?
    4. 缓存 验证可用性 ?
      
 3. 总结 IT 工程师为什么对 http 不了解的缘由:
    1. http 协议作为 web 开发中最基础的内容, 所有与 web 开发相关, 数据传输/内容传输 都是要通过 http 协议的 。
    2. 现在 web 开发的同学在入门的时候很难有机会, 有人告诉我们要先从 http 协议开始学习 。
    3. 先从 http 协议开始学习, 对于没有计算机基础的同学也很难去学习 。
    4. 我们入门的时候都是直接上手 直接去做 页面 / demo / 框架 。
    5. 对于后端更是直接上手 框架 。
    

图片示例:

---

二: http 对于开发者是很重要的原因:

1. 前端所有的 静态资源加载/数据加载 都是需要 http 协议进行发送的 。

2. 后端开发者所做的服务, 提供的内容与数据丢给 web、app 客户端也是需要通过 http 去发送的 。

3. 浏览器与服务器如何进行交互, 有哪些内容可以影响到数据加载的速度或者传输效率, 我需要了解它的实现逻辑是离不开 http 的 。

---

三: http 常见简单示例:

1. 输入 URL 打开网页, 请求网页内容, 然后展示给用户 。

2. 通过 Ajax 获取数据 (数据格式可以为: JSON / XML / 字符串)。

3. img 标签加载图片 - src / script - src / link - src 。

---

四: http 缓存简单介绍:

 1. 设置缓存: Cache-Control
    1. Cache-Control : max-age=100 -> 对应的静态资源缓存 100 秒 。
    2. 给 Cache-Control 设置 public / private 来控制它只能在客户端进行缓存, 还是可以通过代理服务器进行缓存 。
    3. 给 Cache-Control 设置 must-revalidate 让缓存过期之后必须要到服务端验证过之后, 才能继续使用缓存 。
    4. no-cache / no-store 控制是否使用缓存 。

 2. 缓存的验证:
    1. 因为缓存是存在客户端的, 客户端并不知道服务器是否有改变缓存的这部分数据, 那么我们的缓存就有必要进行一个验证 。
    2. 我们可以通过 last-modified 配合 if-modified-since 来进行验证 。
    3. 我们可以通过 etag 配合 if-none-match 来进行验证 。

 3. 缓存是对 web 服务性能, 提升最大的一环 。
 

图片示例:

---

五: http 更多的实际使用:

 1. http 头的作用:
    1. Content-Type / Content-Encoding 等来约束数据的类型 。
    
 2. cookie 用来保持会话信息(session 方案就是通过 cookie 来实现的) 。
 
 3. CORS 实现跨域, 并保持安全性限制 。
    1. 如果我们的跨域服务对所有人进行开放, 那么每个人都可以进行访问, 这样就无法保证我们的服务是安全的 。
    

---

六: TCP (http 原理)简单介绍:

1. TCP 的三次握手 。

2. HTTPS 创建连接的过程, 以及为什么 HTTPS 就是安全的 。

3. 什么是长连接, 以及为什么需要长连接 。

4. HTTP2 的 信道复用 又为什么能够提高性能 。

---

七: 浏览器输入 url 之后, “http” 请求返回 的完整过程:

从我们打开浏览器, 输入 url 之后, 整个有关数据加载的过程所会经历的每个时间点:

1. Redirect (重定向): 为什么 Redirect? 因为浏览器可能记录我们输入的 url, 已经永久跳转成一个新的地址了, 所以一开始浏览器就需要判断是否需要 Redirect, 以及 Redirect 到哪里 。

2. App cache (应用程序缓存): 查看缓存, 因为我们请求的资源可能已经缓存过了, 所以我们要去 App cache 中查看缓存数据否已经存在; 如果没有缓存, 就要去实际的服务器去请求资源 。

3. DNS: 因为我们输入的是域名, 要对应成 IP 之后才能真正的访问到服务器, 所以这个时候要先去把域名解析为对应的 IP 地址, 这个叫做 DNS 解析 。

4. TCP: 有了 IP 之后, 我们就要去创建 TCP 链接, 创建 TCP 链接要经过 3 次握手之后才能真正的把链接创建起来; 同时, 如果我们这个请求是 https 的, 要创建一个 https 的链接, 它和 TCP 的 3 次握手又不一样; 因为它中间要有一个保证安全的数据传输的过程 。

5. request(请求): 在链接创建好了之后, 才真正发送 http 请求的数据包 。

6. Response(响应): 我们在请求的数据包发送完成之后, 服务器接受到这个数据, 进行一个数据处理之后返回这个请求想要的内容, 那么它就开始返回数据, 返回数据之后这个 http 请求才真正的完成 。

图片示例:

---

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “HTTP协议原理与实践代码” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。

如果对你有所帮助，喜欢的可以点个关注, 必然回访; 文章还一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。

HTTP协议原理下篇文章: HTTP协议相关的网络经典五层模型