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

浏览器输入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<!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规范定义了绘制流程的顺序，绘制的顺序其实就是元素进入堆栈样式上下文的顺序，这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。块呈现器的堆栈顺序如下：背景颜色、背景图片、边框、子代、轮廓。经过上述一序列的请求和渲染，就形成了浏览器中所展示的页面。