HTTP完整请求流程

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

DNS 查找过程：

浏览器缓存 - 浏览器会缓存 DNS 记录一段时间，但是操作系统并没有告诉浏览器储存 DNS 记录的时间。于是，不同浏览器会储存各自的一个固定时间（ 2 分钟到 30 分钟不等）。系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（ Windows 里是 gethostbyname ），这样便可获得并查询系统缓存中的记录。查找本机hosts文件路由器缓存 – 接着，前面的查询请求发向路由器。路由器一般会有自己的 DNS 缓存。ISP DNS缓存 – 接下来要 check 的就是 ISP 缓存 DNS 的服务器。ISP (Internet Service Provider) 就是互联网服务提供商，在这一般都能找到相应的缓存记录。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，只不过这样响应会慢点（还是会返回），其他情况的话就直接拒绝了。

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

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