计算机网络-HTTP完整请求流程

HTTP完整请求流程

一，浏览器查找域名的 IP 地址

DNS 查找过程：

1. 浏览器缓存 - 浏览器会缓存 DNS 记录一段时间，但是操作系统并没有告诉浏览器储存 DNS 记录的时间。于是，不同浏览器会储存各自的一个固定时间（ 2 分钟到 30 分钟不等）。
2. 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（ Windows 里是 gethostbyname ），这样便可获得并查询系统缓存中的记录。
3. 查找本机hosts文件
4. 路由器缓存 – 接着，前面的查询请求发向路由器。路由器一般会有自己的 DNS 缓存。
5. ISP DNS缓存 – 接下来要 check 的就是 ISP 缓存 DNS 的服务器。ISP (Internet Service Provider) 就是互联网服务提供商，在这一般都能找到相应的缓存记录。
6. DNS递归搜索 – 你的 ISP 的 DNS 服务器从跟域名服务器开始进行递归搜索，从 .com 顶级域名服务器到 example 的域名服务器。一般 DNS 服务器的缓存中会有 .com 域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

DNS 进行域名解析的过程：

• 客户端发出 DNS 请求翻译 IP 地址或主机名；
• DNS 服务器在收到客户端的请求后，检查 DNS 服务器的缓存，若查到请求的地址或名字，即向客户端发出应答信息；
• 若没有查到，则在数据库中查找，若查到请求的地址或名字，即向客户端发出应答信息；
• 若没有查到，则将请求发给根域 DNS 服务器，并依序从根域查找顶级域，由顶级查找二级域，二级域查找三级，直至找到要解析的地址或名字。然后，向客户端所在网络的 DNS 服务器发出应答信息，DNS 服务器收到应答后，先在缓存中存储，然后，将解析结果发给客户端。
• 若没有找到，则返回错误信息。

二，浏览器与WEB服务器建立一个TCP连接（三次握手）

参考地址：https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc

• 详细图解

• 动态图解
  
• 通俗图解
  

三，浏览器给WEB服务器发送一个HTTP请求

参考地址：https://blog.csdn.net/ailunlee/article/details/90600174

一个HTTP请求报文由请求行（request line）、请求头部（headers）、空行（blank line）和请求数据（request body）4个部分组成

四，服务器端响应HTTP请求，浏览器得到HTML代码

参考地址：https://blog.csdn.net/ailunlee/article/details/90600174

HTTP响应报文由状态行（status line）、相应头部（headers）、空行（blank line）和响应数据（response body）4个部分组成。

五，浏览器解析HTML代码，并请求HTML代码中的资源

浏览器拿到html文件后，就开始解析其中的html代码，遇到js/css/image等静态资源时，就向服务器端去请求下载（会使用多线程下载，每个浏览器的线程数不一样），这是时候就用上 keep-alive特性了，建立一次HTTP连接，可以请求多个资源，下载资源的顺序就是按照代码里面的顺序，但是由于每个资源大小不一样，而浏览器又是多线程请求请求资源，所以这里显示的顺序并不一定是代码里面的顺序。

六，浏览器解析渲染页面

浏览器拿到响应文本 HTML 后，接下来介绍下浏览器渲染机制

浏览器解析渲染页面分为一下五个步骤：

• 根据 HTML 解析出 DOM 树

• 根据 CSS 解析生成 CSS 规则树

• 结合 DOM 树和 CSS 规则树，生成渲染树

• 根据渲染树计算每一个节点的信息

• 根据计算好的信息绘制页面

• 根据 HTML 解析 DOM 树
  根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
  在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

• 根据 CSS 解析生成 CSS 规则树
  解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
  浏览器在 CSS 规则树生成之前不会进行渲染。

• 结合 DOM 树和 CSS 规则树，生成渲染树
  DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。
  精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度。

• 根据渲染树计算每一个节点的信息（布局）
  布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
  回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

• 根据计算好的信息绘制页面
  绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
  重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
  回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。

七，关闭TCP连接（四次挥手）

参考地址：https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc

• 详细图解
  
• 通俗图解
  

八、浏览器发生异步请求

在web2.0时代，即使在页面渲染后客户端还是持续与服务器端通信，这个模式被称为AJAX，是“Asynchronous JavaScript And XML”的缩写。

JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。

浏览器在解析过程中，如果遇到请求外部资源时，请求过程是异步的，并不会影响HTML文档进行加载，但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

思考问题

Q：http请求最大并发连接数是什么?
A：这个要看服务器的IO方式。如果是阻塞IO，最大连接数=最大并发线程数。如果非阻塞IO，也就是使用selector的，那么最大连接数和并发线程数无关，可以有2W连接数，但线程数可以是400，只不过这样响应会慢点（还是会返回），其他情况的话就直接拒绝了。

内容参考网上文章整理，仅限个人学习使用：

1. https://blog.csdn.net/weixin_30693683/article/details/100092946
2. https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc
3. https://blog.csdn.net/ailunlee/article/details/90600174
4. https://www.cnblogs.com/xuzekun/p/7527736.html