从输入网址到页面显示的完整过程

简介

从输入网站到呈现出页面的过程，我认为大概可分为两大部分：

• TCP/IP协议族通信
• 页面渲染

TCP/IP协议族通信

通常呢，使用的网络（包括互联网）是在TCP/IP协议族的基础上运作的（PS，本文仅介绍理解HTTP所需掌握的TCP/IP协议组的概要，如需深入了解，请查看相关专业书籍）。

TCP/IP协议族里重要的一点就是分层，TCP/IP协议族按层次分为应用层,传输层,网络层,数据链路层,那么各个层都有什么作用呢？

• 应用层，应用层决定了向用户提供应用服务时通信的活动，TCP/IP协议族内预存了各类通用的应用服务，比如，FTP（文件传输协议）和DNS(域名系统)服务，当然HTTP就属于这一层。
• 传输层，传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据传输。在传输层有两个不同性质的协议：TCP（传输控制协议）和UDP（用户数据报协议）
• 网络层，网络层用来处理在网络上流动的数据包，数据包是网络传输的最小数据单位，该层规定了通过怎样的路径（所谓的传输路线）到达对方计算机，并把数据包传送给对方。
• 链路层（又名数据链路层），用来处理网络的硬件部分，包括控制操作系统，硬件的设备驱动等，硬件的范畴均在链路层的作用范围之内。

那么TCP/IP的传输流如下图：

发送端从应用层往下走，接收端则往应用层往上走，讲到这里大家应该对于TCP/IP有了一些了解了。

接下来，就回归到正题上，当你在浏览器敲入一个网址后，发生了什么了呢？

DNS解析

首先呢，如果你输入的网址不是ip地址的话，会通过应用层的DNS服务，根据输入网站的域名进行查找，查找到对应的ip地址，为什么必须要通过DNS服务找到对应的ip地址才才能建立连接呢，是因为每台计算机的唯一标识是ip地址，但是ip地址不容易记，所以才用一个网址来代替ip地址，这样一来，大家就比较容易记得住。

那么DNS是怎么查找的呢？它查找的顺序如以下所示：

• 浏览器缓存 ,浏览器缓存DNS记录一段时间。有趣的是，操作系统不会告诉浏览器每个DNS记录的生存时间，因此浏览器将它们缓存一段固定的时间（因浏览器而异，2到30分钟）。
• 操作系统缓存，如果浏览器缓存不包含所需的记录，则浏览器进行系统调用（Windows中的gethostbyname）。操作系统有自己的缓存
• 路由器缓存，请求继续到您的路由器，路由器通常有自己的DNS缓存
• ISP DNS缓存，检查的下一个位置是缓存ISP的DNS服务器。有了缓存，自然而然。
• 递归搜索 ，您的ISP的DNS服务器开始递归搜索，从根域名服务器开始，然后顶级域名，再然后二级。。。从右往左依次搜索。比如www.baidu.com，先从根域名“.”服务器开始查找，查找到顶级域名.com,在查到到二级baidu.com,然后如果上边没有了，就返回查找到的ip地址。

应用层

判断是哪种应用程序格式，那么浏览网页用的是HTTP协议，客户端就会发送HTTP请求报文。

传输层

利用TCP协议进行连接，提供可靠的字节流服务。所谓的字节流服务（Byte Stream Service） 是指， 为了方便传输， 将大块数据分割成以报文段（segment） 为单位的数据包进行管理。 而可靠的传输服务是指， 能够把数据准确可靠地传给对方。 一言以蔽之，TCP 协议为了更容易传送大数据才把数据分割， 而且 TCP 协议能够确认数据最终是否送达到对方。为了准确无误地将数据送达目标处， TCP 协议采用了三次握手策略。握手过程中使用了 TCP 的标志SYN（synchronize） 和ACK（acknowledgement） 。发送端首先发送一个带 SYN 标志的数据包给对方。 接收端收到后，回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。 最后， 发送端再回传一个带 ACK 标志的数据包， 代表“握手”结束。若在握手过程中某个阶段莫名中断， TCP 协议会再次以相同的顺序发送相同的数据。

网络层

现在确认连接上了，ip协议就开始行动了，ip协议主要作用就是把各种数据包传送给对方，而要保证传送到对方那里，最重要的两个条件是ip地址和MAC地址，那么怎么获取对方的MAC的地址呢？是利用ARP（地址解析协议），根据ip地址解析出MAC地址，从而进行通信，当通信的双方不在同一个局域网时，需要连接处的网管多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

数据链接层

在网络层找到对方的MAC地址后，就将数据发送到数据链路层传输，由于以太网数据包的数据部分，最大长度为1500字节，而最终的数据包远远不止，所以需要分割为4个包进行发送。

最后

服务端将收到的4个包拼起来，取出完整的TCP数据包，然后读出里面的"HTTP请求"，接着做出"HTTP响应"，再用TCP/IP通信协议回传，当客户端收到回复，一个完整的TCP/IP通信就完成了，如下图所示。

页面渲染

在网络通讯信阶段，客户端已经拿到了服务端返回的html页面，接下来就是浏览器渲染页面的过程了。
当浏览器的呈现引擎拿到html后，会进行以下操作：

• 解析html，构造DOM树
• 渲染树构建
• 渲染树布局
• 绘制渲染树
  

呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：渲染树。

渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

渲染树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。

布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。

需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建渲染树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

需要注意的是,在解析过程中：

• 如果遇到请求外部资源时，如图片、外链的CSS等，请求过程是异步的，并不会影响html文档进行加载，但是页面呈现需要等待外链CSS加载完成，图片则不需要~
• 如果遇到script标签，将会把阻塞渲染树的构建绘制，直到JS解析完毕。

参考文献

• 图解HTTP
• 浏览器工作原理