浏览器输入URL到页面渲染完成，这个过程大致可分为两个阶段：网络通信和页面渲染。

一、网络通信

互联网内各网络间设备的通信遵循TCP/IP协议，利用TCP/IP协议进行网络通信时，会通过分层与对方通信。数据传输的过程：由应用层产生数据后，经过传输层的分段处理（添加TCP或UDP包头）、网络层（添加IP地址信息）、数据链路层（封装成MAC帧）、物理层传输电信号。

浏览器输入URL：

1.1、浏览器根据域名查找IP地址

在浏览器中输入域名 jd.com后，查找IP地址分为两个部分：客户机本地的递归查询和服务器的迭代查询。

<1> 客户机本地的递归查询：

客户机本地会依次去查找浏览器本身的域名缓存、客户机系统自身的缓存、客户机系统中的hosts文件，如果在当前的缓存中找到了对应的IP地址映射，则直接返回，如果在本地的缓存中都未找到对应的IP地址，则会去服务器查询。

<2> 服务器的迭代查询：

如果本地配置的服务器没有缓存相域名的IP，那么它就会去ISP运营商服务器去查找，如果也没有，运营商的服务器会返回给本地服务器一个根域的服务器地址。然后去根服务器发起访问，进行递归查询，如果也没有，就会去顶级域名的服务器去查找.com，然后再查找觉得jd.com的二级域名的服务器，以此类推就能找到相应的IP。如果仍然未找到，代表域名是错误的。

1.2、浏览器发送HTTP请求

找到IP地址后，则向对应IP地址的服务发送HTTP请求，HTTP请求消息包括请求起始行、请求头和请求主体

1）请求消息起始行：

包括：请求方法、请求URI（请求地址报过URL和URN）、协议版本。

2）请求头

包括：请求消息的专用头（ Host、Accept、Origin、Referer、User-Agent、Accept-Encoding、Accept-Language）、请求消息通用头（Connection、Cache-Control、Pragma、Date）、请求主体描述头（Content-Length、Content-Type）

3）请求主体（Body）

客户端想给服务器传递的消息。

1.3、TCP传输报文

TCP把应用层发送的用于网间传输的、用8位字节表示的数据流分成适当长度的报文段（报文段的长度不能超过MTU限制）。TCP为了保证不发生丢包，就给每个包一个序号，同时序号也保证了传送到接收端实体的包按序接收。然后接收端实体对已成功收到的包发回一个响应的确认（ACK）；如果发送端实体在合理的往返延时（RTT）内未收到确认，那么对应的数据包就被假设为已丢失将会被进行重传。TCP用一个校验和函数来检验数据是否有错误；在发送和接收时都要计算校验和。当TCP要发送数据时，需要通过三次握手协议建立连接。之后TCP把结果包传给IP层由它通过网络将包传送给接收端实体的TCP层。

第一次握手：客户端发送syn包到服务器，并进入SYN_SENT状态，等待服务器的确认。第二次握手：服务器收到syn包，必须确认客户端的syn，同时自己也发送一个syn包，即SYN+ACK包，此时服务器进入SYN_RECV状态。第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK，此包发送完毕，客户端与服务器端进入ESTABLISHED状态，即TCP连接成功，完成三次握手。

1.4、IP协议查询MAC地址并将数据发送的数据链路层

IP协议的作用是把TCP分割好的各种数据包传送给接收方，要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更改，但是MAC地址一般是固定不变的。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

ARP是地址解析协议，功能是根据IP地址获取物理地址的一个TCP/IP 协议，即把IP地址转化为MAC地址。发送方首先检查ARP缓存表，查找目的地址的IP与MAC地址。如果存在地址中，直接使用ARP协议解析，完成的封装，传输数据。如果不存在目的地址的MAC地址，则发送一个ARP广播（包含本主机的IP地址、MAC地址、目的主机的IP地址）。网络中主机接收到广播后，先检查自己的IP地址，不符合丢弃该广播，符合则把源主机的IP地址和MAC地址映射添加到本地ARP缓存中，并向源主机发出ARP应答（包含自己的IP地址和MAC地址）。源主机收到应答后，把目标主机的IP和MAC地址添加到缓存中，然后开始进行通信。

在找到对方的MAC地址后，将数据发送到数据链路层传输，此时客户端发送阶段结束。

1.5、服务器接收数据并相应请求返回相应的文件

接收端的服务器在链路层接收到数据，然后再一层层去掉添加的首部。这个过程包括在传输层通过TCP协议将分段的数据包重新组成原来的HTTP请求报文。然后服务器发送HTTP响应。HTTP的响应消息包括响应起始行、响应头、响应主体。

1）响应起始行：

包括：协议版本、空格、响应状态码、空格、原因短句（描述给你的状态码的原因）。

2）响应头

包括：响应消息的专用头（ Server、Last-Modified、Content-Encoding）、响应消息通用头（Connection、Cache-Control、Pragma、Date）、请求主体描述头（Content-Length、Content-Type）

3）响应主体描述头

客户端想给服务器传递的消息。

二、页面渲染

请求成功后，服务器返回给浏览器的文本信息，通常包括HTML、CSS、JS、图片等文件。不同浏览器内核由于内核不同，怼页面的渲染的过程也不相同。

webkit的渲染过程：

Gecko的渲染过程：

渲染的基本流程：HTML解析DOM Tree、CSS解析Style Rules、将两者关联生成Render Tree、Layout根据Render Tree计算每个节点的信息、Painting根据计算好的信息绘制整个页面。

2.1、HTML解析

HTML Parser的任务是将HTML标签解析成DOM Tree

xml 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <p>p标签的内容</p>
    <div>div标签的内容</div>
   </body>
</html>

经过解析后的DOM Tree

2.2、CSS解析

CSS Parser将CSS解析成Style Rules，Style Rules也叫CSSOM（CSS Object Model），CSS Parser的作用就是将很多个CSS文件中的样式合并解析出具体树形结构。

2.3、js脚本处理、呈现树

浏览器解析文档时，当遇到script标签的时候会立即解析脚本，停止解析文档，因为javascript可能会改动DOM和CSS，所以继续解析会造成浪费。如果脚本是外部的，会等待下载完毕，再继续解析文档。脚本解析会将脚本中的DOM和CSS的地方分别解析出来，然后追加到DOM Tree和Style Rules上。

Render Tree的构建其实就是DOM Tree和CSSOM attach的过程。实际上就是一个计算好的样式与HTML对应的Tree。

2.4、样式计算

计算样式是一个很复杂的过程，DOM中一个元素可以对应样式表中的多个样式，样式表包含了所有的样式：浏览器默认样式、自定义样式表、inline样式表元素、HTML可视化属性。为了简化样式计算，Friefox还采用了另外两种树：规则树和样式上下文树。WebKit 也有样式对象，但它们不是保存在类似样式上下文树这样的树结构中，只是由 DOM 节点指向此类对象的相关样式。

样式上下文树包含端值，要计算出这些值，应按照正确顺序应用所有的匹配规则，并将其从逻辑值转化为具体的值。例如，如果逻辑值是屏幕大小的百分比，则需要换算成绝对的单位。规则树使得节点之间可以共享这些值，以避免重复计算，还可以节约空间。所有匹配的规则都存储在树中。路径中的底层节点拥有较高的优先级。规则树包含了所有已知规则匹配的路径。规则的存储是延迟进行的。规则树不会在开始的时候就为所有的节点进行计算，而是只有当某个节点样式需要进行计算时，才会向规则树添加计算的路径。样式对象具有与每个可视化属性一一对应的属性（均为CSS属性但更为通用）。如果某个属性未由任何匹配规则所定义，那么部分属性就可由父代元素样式对象继承，其他属性具有默认值。

2.5、布局并绘制

创建渲染树后，下一步就是布局（Layout），或者叫回流（reflow，relayout），这个过程就是通过渲染树中的渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对DOM进行修改，这时候可能需要重新进行布局，也可称为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或回流的方法，实现其布局或回流。

在绘制的阶段，系统会遍历呈现树，并调用呈现器的"paint"方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成。CSS2规范定义了绘制流程的顺序，绘制的顺序其实就是元素进入堆栈样式上下文的顺序，这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。块呈现器的堆栈顺序如下：背景颜色、背景图片、边框、子代、轮廓。

经过上述一序列的请求和渲染，就形成了浏览器中所展示的页面。

浅谈从浏览器输入URL到页面渲染的流程