高级进阶之HTTP篇

Ali酱
339 阅读9分钟

从输入 URL 到页面加载完成，发生了什么？

简单划分6个流程：

  • DNS 解析
  • TCP 连接
  • HTTP 发送请求
  • HTTP 响应返回
  • TCP 断开连接
  • 浏览器解析渲染页面

DNS 解析

DNS 是一个分布式数据库，把像www.google.com 这样的域名翻译成 IP 地址，并将请求映射到远程服务器。换句话说，DNS 在互联网上记录 URL 和它对应的 IP 地址。所以像 www.google.com 这样的域名会被解析成一个 IP 地址197.251.230.45

DNS 查询 过程：

操作系统会首先在本地缓存中查询 IP 没有的话会去系统配置的 DNS 服务器中查询 如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器 然后去该服务器查询 google 这个二级域名 接下来三级域名的查询其实是我们配置的，你可以给 www 这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP

TCP 连接

TCP三次握手

客户端发送一个带 SYN=1，Seq=X 的数据包到服务器端口（第一次握手，由浏览器发起，告诉服务器我要发送请求了）

服务器发回一个带 SYN=1， ACK=X+1， Seq=Y 的响应包以示传达确认信息（第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧）

客户端再回传一个带 ACK=Y+1， Seq=Z 的数据包，代表“握手结束”（第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧）

HTTP 发送请求

TCP连接建立后，浏览器就可以利用HTTP／HTTPS协议向服务器发送请求了。服务器接受到请求，就解析请求头，如果头部有缓存相关信息如if-none-match与if-modified-since，则验证缓存是否有效，若有效则返回状态码为304，若无效则重新返回资源，状态码为200.

HTTP 响应返回

浏览器拿到响应数据，解析响应内容，首先浏览器会判断状态码是什么，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错，如果是 200 浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件。

TCP 断开连接

四次挥手

当客户端和服务器通过三次握手建立了TCP连接后，当数据传送完毕，需要断开TCP连接。

  • 第一次挥手：主机1（可以是客户端也可以是服务器端），设置SEQ，ACK，向主机2发送一个FIN报文段（FIN，seq=a）。主机1进入FIN-WAIT_1状态；表示客户端没有数据发生给服务器了。
  • 第二次挥手：主机2收到主机1发送的FIN报文段，向主机1回一个ACK报文段（ACK = a+1）），客户端进入FIN_WAIT_2状态，表示同意关闭请求
  • 第三次挥手：主机2向主机1发送FIN报文段，请求关闭连接，同时服务器进入LAST_ACK状态。（FIN，seq = b）
  • 第四次分手：主机1向主机2发送FIN报文段和ACK报文段（ACK =b+1），主机1进入TIME_WAIT状态；主机2收到ACK报文后，就关闭连接，此时主机1等待2MSL依然没有收到回复，则证明Server站已正常关闭，那么主机1也可以关闭了

浏览器解析渲染页面

文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。

如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件，这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。

CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西

在生成 Render 树的过程中，浏览器就开始调用 GPU 绘制，合成图层，将内容显示在屏幕上了

HTTP

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）

HTTP特点

无连接

无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

简单快速

每个资源uri是固定的，图片，页面地址（统一资源符），处理起来非常简单（客户向服务器请求服务时，只需传送请求方法和路径）。

无状态

HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

HTTP2

HTTP/2 相比于 HTTP/1，可以说是大幅度提高了网页的性能。

在 HTTP/1 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量（Chrome 下一般是限制六个连接），当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求。

在 HTTP/2 中引入了多路复用的技术，这个技术可以只通过一个 TCP 连接就可以传输所有的请求数据。多路复用很好的解决了浏览器限制同一个域名下的请求数量的问题，同时也接更容易实现全速传输，毕竟新开一个 TCP 连接都需要慢慢提升传输速度。

二进制传输

HTTP/2 中所有加强性能的核心点在于此。在之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP/2 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。

多路复用

在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。 帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。

多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免HTTP旧版本中的队头阻塞问题，极大的提高传输性能。

头部压缩

在 HTTP/1 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。

在 HTTP /2 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。

服务端推送

在 HTTP/2 中，服务端可以对客户端的一个请求发送多个响应。举个栗子，如果 个请 求请求的是index.html，服务 很可能会同时响应index.html、logo.jpg 以及 css 和 js文件，因为它知道客户端会要到这些东西。这相当于在 个 HTML 档内集合 所有的 资源

HTTPS

HTTP 是明文传输的，这就造成了很大的安全隐患。在网络传输过程中，只要数据包被人劫持，那你就相当于赤身全裸的暴露在他人面前，毫无半点隐私可言。为了解决网络安全隐患，推出了HTTPS。

HTTPS是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS是 在HTTP 的基础下加入SSL 层，HTTPS 的安全基础是 SSL。

HTTPS、SSL、TLS三者之间的联系和区别

SSL是基于HTTP之下TCP之上的一个协议层，是基于HTTP标准并对TCP传输数据时进行加密，所以HPPTS是HTTP+SSL/TCP的简称， 可以说TLS（Transport Layer Security 安全传输层协议）就是SSL（Secure Socket Layer 安全套接层）的新版本3.1

HTTPS通讯流程

  • 浏览器发起请求
  • 服务器返回公钥+签名证书
  • 浏览器向CA认证中心询问证书是否有效
  • CA认证返回结果
  • 浏览器用公钥加密对称秘钥
  • 服务器用自己的私钥解密公钥得到对称密钥，发起通讯

HTTPS原理

一个故事讲完https

高级进阶系列传送门

avatar
文章
阅读
粉丝