复习：从输入网址到页面显示的详细过程（超详细）

从输入网址到页面显示的详细过程：这是一道我们熟知的面试题，每次面试前都要复习一下。但其实不止是应付面试，这些知识对于我们前端成长的道路非常重要。下面我就给大家具体讲解一下经过了哪些步骤。做全网最全面的总结！

前言

首先，先简单总结一下大概过程，然后再进行详细解释，包括相关的一些技术的讲解。

大概过程总结

1、输入网址
2、DNS解析
3、建立tcp连接
4、客户端发送HTPP请求
5、服务器处理请求　
6、服务器响应请求
7、浏览器展示HTML
8、浏览器发送请求获取其他在HTML中的资源。

OSI七层模型

咱们前端就只需要关注面向用户的 应用层，表示层，会话层 就够了！

1.总体层面

1. 输入地址

当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

2. DNS解析

• 首先我们要知道，所有要上线的网站都不能直接暴露ip地址，都要设置一个域名来映射自己的ip地址。 那么当我们输入网址，也就是域名的时候，是需要一个方法来将域名转换成ip地址的，这样才能访问ip地址对应的电脑上的部署的网站。
  域名与ip地址通过DNS进行转换。DNS（域名系统）是互联网的一项服务，它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。
• 那么DNS解析域名的过程是啥呢？
  浏览器缓存>> 本地dns（通信运行商机房）根dns》顶级域名服务器》权威域名服务器

1. 一般来说，浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的ip 地址。
2. 如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
3. 查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
4. 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
5. 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址.
6. 最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。
   

3、建立TCP链接

在拿到域名对应的IP地址后，会以随机端口（1024~~65535）向WEB服务器程序80端口发起TCP的连接请求，这个连接请求进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序，最终建立了TCP/IP的连接，对于客户端与服务器的TCP链接，必然要说的就是『三次握手』。　　　　　　　　

客户端发送一个带有SYN标志的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功。

通俗化之后就是：
客户端：老弟我要跟你链接
服务端：好的，同意了
客户端：好嘞

4、游览器向WEB服务器发起Http请求

建立TCP连接之后，发起HTTP请求，请求一般分为三部分
请求方法URI协议/版本
请求头(Request Header)
请求正文

下面是一个完整的请求

想了解http1 http2 http3 https 的区别，可以看我的另一篇文章：https://blog.csdn.net/qq_38974163/article/details/119001506

5、服务器端处理

服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

6、关闭TCP链接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次挥手。

通俗化表达就是：
客户端：老弟，我这边没数据要传了，咱们关闭链接吧
服务端：好的，接收到了，我看看我这边还有没有要传的
服务端：我这边也没有了，关闭吧
客户端：好嘞

7、游览器解析资源

对于获取到的HTML、CSS、JS、图片等等资源。

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。

在解析CSS的同时，可以继续加载解析HTML，但在解析执行JS脚本时，会停止解析后续HTML，这就会出现阻塞问题，关于JS阻塞相关问题，这里不过多阐述,后面会单独开篇讲解。

8、游览器布局渲染

根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：repaint和reflow。

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。
reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。
有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

2.浏览器架构层面

浏览器架构知识：
在讲浏览器架构之前，先理解两个概念，进程和线程。

进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位，线程（thread）是CPU调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。

简单的说呢，进程可以理解成正在执行的应用程序，而线程呢，可以理解成我们应用程序中的代码的执行器。而他们的关系可想而知， 线程是跑在进程里面的，一个进程里面可能有一个或者多个线程，而一个线程，只能隶属于一个进程。

大家都知道，浏览器属于一个应用程序，而应用程序的一次执行，可以理解为计算机启动了一个进程，进程启动后，CPU会给该进程分配相应的内存空间，当我们的进程得到了内存之后，就可以使用线程进行资源调度，进而完成我们应用程序的功能。

而在应用程序中，为了满足功能的需要，启动的进程会创建另外的新的进程来处理其他任务，这些创建出来的新的进程拥有全新的独立的内存空间，不能与原来的进程内向内存，如果这些进程之间需要通信，可以通过IPC机制（Inter Process Communication）来进行。

不同的浏览器使用不同的架构，下面主要以Chrome为例，介绍浏览器的多进程架构。
在Chrome中，主要的进程有4个：
浏览器进程 (Browser Process)：负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问。
渲染进程 (Renderer Process)：负责一个Tab内的显示相关的工作，也称渲染引擎。
插件进程 (Plugin Process)：负责控制网页使用到的插件
GPU进程 (GPU Process)：负责处理整个应用程序的GPU任务

下面开始分析键入url到页面展示的流程：

这个过程主要依靠三个进程的配合：浏览器进程， 网络进程，渲染进程。

浏览器进程： 主要负责用户交互，子进程管理和文件储存等功能。
网络进程： 面向渲染进程和浏览器进程等提供网络下载功能。
渲染进程： 把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。
整个过程主要有以下几个步骤：

浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。
网络进程发起真正的URL请求。
然后网络进程接受到网络进程的响应数据，发送‘提交导航’消息到渲染进程；
渲染进程接受到"提交导航"的消息后，便开始准备接收HTML数据，接收数据的方式是直接和网络进程建立数据管道。
最后渲染进程会向浏览器进程"确认提交"，告诉浏览器进程：“已经准备好接受和解析页面数据了”。
浏览器进程接受到渲染进程“提交文档”的消息后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。
用户发出URL请求到页面开始解析的这个过程，就叫导航。

2.1.用户输入阶段

输入URL：用户在地址栏输入关键字的时候，地址栏会判断是搜索内容还是请求的URL，如果输入的内容符合URL规则就把内容加上协议，合成完整的URL链接。否则就将内容和默认的搜索引擎合成新的URL。
加载：用户输入关键字按下回车之后，意味着当前页将要被替换成新的页面，浏览器导航栏会显示loading状态，当前还是呈现之前的页面，因为新页面的响应数据还没获得。

2.2.URL请求过程

首先浏览器进程会通过进程通信（IPC）把URL请求发送到网络进程，网络进程接受到URL请求后会发起真正的URL请求。
网络进程会先查找本地缓存是否缓存了该资源，如果有直接返回该资源，如果没有则开始第一步进行DNS解析，先从DNS数据缓存服务中查找当前域名信息，如果有信息就直接返回，没有就进行解析，获取请求域名的服务器IP地址，如果请求协议是HTTPS，还需要建立TLS链接。
通过IP地址和服务器进行三次握手建立TCP链接，建立后，浏览器会构建请求头，cookei等相关信息向服务器发送请求信息。服务器接受到请求信息后，生成对应的响应数据返回浏览器后，网络进程接收响应数据后解析响应头的内容，如果返回的状态码是301/302，说明服务器需要浏览器重定向到其他URL，网络进程会从响应头的Location字段获取重定向地址，然后发起新的请求。然后根据请求头的Content-Type字段判断数据类型是下载类型还是正常的HTML页面，如果是下载类型请求会被提交到浏览器的下载管理器，导航流程结束，但如果是HTML类型浏览器的渲染进程就会准备进行页面渲染。

2.3.准备渲染阶段

默认情况下浏览器会为每一个页面分配一个渲染进程，但是某些情况下页面会共用一个渲染进程比如从一个页面打开一个新的页面，而新页面和当前页面又是同一个站点（根域名和协议相同），Chrome浏览器会复用父页面的渲染进程。

渲染进程准备好之后，还不能立即进入文档解析状态，因为文档数据还在网络进程中没有提交给渲染进程。

2.4.提交文档阶段

提交文档阶段是浏览器进程将网络进程接收到的HTML数据提交给渲染进程的过程：

渲染进程准备好后，浏览器进程会向它发送‘提交文档’的消息。
渲染进程接收到消息后会与网络进程建立传输数据的管道，等文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程。
浏览器进程在收到消息后，会更新浏览器界面状态，包括安全状态，地址栏的URL，前进后退的历史状态，更新web页面。

2.5.渲染阶段

文档一提交，渲染进程就开始解析页面和子资源加载了，这个过程又分为几个阶段：

渲染进程由上而下解析页面，构建DOM树，在解析过程中如果遇见javaScript脚本会阻塞DOM树的解析，这也是我们一般将脚本放在最底部的原因。
样式计算构建CSSOM树，不论是link标签引入的外部样式还是style标签定义的样式，内联样式的css都会被解析为对应的CSSOM树。
然后将DOM树和CSSOM合并生成Render渲染树，然后开始根据它的每个节点计算出具体位置和几何大小进行布局，然后根据节点生成对应图层，然后提交到合成线程，合并图层，绘制生成页面。

就这！