从URL到浏览器页面渲染完成

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

知识准备

TCP/IP协议簇图及相关协议

网际互联及OSI七层模型：

物理层、数据链路层、网络层、传输层、会话层、表示层、应用层

==========================================

物理层

作用：定义一些电器，机械，过程和规范，如集线器；

PDU(协议数据单元)：bit/比特

设备：集线器HUB;

注意：没有寻址的概念；

==========================================

数据链路层

作用：定义如何格式化数据，支持错误检测；

典型协议：以太网，帧中继（古董级VPN）

PDU：frame（帧）设备：以太网交换机；

备注：交换机通过MAC地址转发数据，逻辑链路控制；

===========================================

网络层

作用：定义一个逻辑的寻址，选择最佳路径传输，路由数据包；

典型协议：IP，IPX，ICMP,ARP(IP->MAC),IARP;

PDU:packet/数据包；

设备：路由器

备注：实现寻址

============================================

传输层：

作用：提供可靠和尽力而为的传输；

典型协议：TCP,UDP,SPX,port(65535个端口),EIGRP,OSPF,

PDU:fragment 段；

无典型设备；

备注：负责网络传输和会话建立；

=============================================

会话层：

作用：控制会话，建立管理终止应用程序会话；

典型协议：NFS, SQL, ASP, PHP, JSP, RSVP(资源源预留协议), windows，

备注：负责会话建立；

==============================================

表示层：

作用：格式化数据；

典型协议：ASCII, JPEG. PNG, MP3. WAV, AVI,

备注：可以提供加密服务；

===============================================

应用层：

作用：控制应用程序；

典型协议：telnet, ssh, http, ftp, smtp, rip, BGP, (未完待续)

备注：为应用程序提供网络服务；

================================================

过程开始

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

1.输入url地址

2.浏览器根据域名查找IP地址

在浏览器中输入域名 www.360.com，首先查找浏览器本身的域名缓存，如果缓存了相应的IP地址，直接从缓存中获取。如果没有缓存，然后找window系统自身的缓存，如果找到了相应的IP就返回，如果也没有找到，之后去查找window系统文件的hosts文件，如果查询到就会就返回相应的IP，如果依然未查到，就会去服务器查询，这样一个查询的过程是递归查询。
本地未找到，就去本地配置的服务器去询问，如果本地配置的服务器保存了相应的域名映射，就直接返回，如果没有缓存相域名的IP，那么它就会去ISP运营商服务器去查找，如果也没有，运营商的服务器会返回给本地服务器一个根域的服务器地址。然后去根服务器发起访问，进行递归查询，如果也没有，就会去顶级域名的服务器去查找.com，然后再查找360.com的二级域名的服务器，以此类推就能找到相应的IP。如果仍然未找到，代表域名是错误的。
注：DNS是应用层协议
3.浏览器发送HTTP请求
HTTP是超文本传输协议，包括HTTP请求消息和HTTP响应消息
HTTP请求消息包括请求起始行、请求头和请求主体
请求起始行（Start Line）
包括请求方法、请求URI（请求地址报过URL和URN）、协议版本
请求头（header）
<1>请求消息的专用头：
Host： easybug.org 告诉服务器请求的是哪一个虚拟机
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng, /;q=0.8 告诉服务器自己可以接收响应内容类型
Origin: http://easybug.org 来源，告诉服务器当前请求来源于哪个域名
Referer: http://easybug.org/Home/Index 引用页告诉服务器当前请求来源于哪个域名
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 客户端在告诉服务器自己的类型
Accept-Encoding: gzip, deflate 客户端在告诉服务器自己在接收的响应数据编码类型
Accept-Language: zh-CN,zh;q=0.9 告诉服务器自己接收的自然语言
<2>请求/响应消息通用头
Connection：keep-alive 告诉对方启用持久链接
Cache-Control：no-cache 告诉对方如何缓存当前消息主体中的内容
Pragma：no-cache HTTP/1.0版本的Cache-Control
Date: Wed, 28 Nov 2018 03:33:52 GMT 消息创建的时间
<3>请求主体描述头
Content-Length：54 描述请求主体的长度
Content-Type: 描述请求主体的内容类型，可以是一下几种：
application/x-www-form-urlencoded请求主体是经过编码后的表单数据
或text/plain请求数据是普通文本未经编码，有的服务器直接拒绝接收！
或multipart/form-data 表单中包含上传的文件数据
请求主体（Body）
客户端想给服务器传递的数据
注：HTTP是应用层协议
4.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连接成功，完成三次握手。
注：TCP、UDP是传输层协议
5.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地址添加到缓存中，然后开始进行通信。
注：IP、ARP、RARP都是网络层协议
6.数据到达数据链路层
在找到对方的MAC地址后，将数据发送到数据链路层传输，此时客户端发送阶段结束。
7.服务器接收数据
接收端的服务器在链路层接收到数据，然后再一层层去掉添加的首部。这个过程包括在传输层通过TCP协议将分段的数据包重新组成原来的HTTP请求报文。
8.服务器响应请求
HTTP的响应消息包括响应起始行、响应头、响应主体
响应起始行（Start Line）
包括协议版本、空格、响应状态码、空格、原因短句（描述给你的状态码的原因）
状态码：
1XX 提示性信息 100 Continue 信息进行分份传送，收到一部分继续传送。101 Switching Protocols http协议切换到https协议 2XX 成功的响应 200 ok 201 Created （put请求的时候）
3XX 需要客户端重定向 301永久重定向请求的链接永久移走了 302临时重定向 303 See Other 304 Not Modified缓存数据库中的数据有效，从缓存数据库中取数据。
4XX 客户端错误 400Bad Request 无效的请求请求消息不符合要求的格式401 请求要求身份验证。对于需要登录的网页，服务器可能返回此响应402为了将来可能需求预留的 403 Forbidden 禁止访问 404 Not Found 请求的东西不存在 405 Method Not Allowed 408 Request Timeout请求超时
5XX服务器端运行错误 500 Internal Server Error 服务器内部错误 501 Not Implemented 502 Bad Gataway网络错误 503 Service Unavailable 服务不可用 504 Gateway网关超时
响应头（Headers）
<1>响应消息的专用头：
Server: nginx/1.13.8 告诉客户端自己的服务器类型
Last-Modified: Tue, 16 Dec 2014 03:50:51 GMT 指定资源的最后一次修改时间
Content-Encoding: gzip告诉客户端内容经过压缩
<2>请求/响应消息通用头
Connection：keep-alive 告诉对方启用持久链接
Cache-Control：no-cache 告诉对方如何缓存当前消息主体中的内容
Pragma：no-cache HTTP/1.0版本的Cache-Control
Date: Wed, 28 Nov 2018 03:33:52 GMT 消息创建的时间
<3>响应主体描述头
Content-Length：141 描述响应主体内容的长度
Content-Type: 响应主体的内容类型有上百种 text/html; charset=utf-8
text/plain
text/html
text/css
application/javascript
application/xml
application/json
image/jpeg
audio/mpeg3…
<4>服务器自定义头部
响应主体（Body）
在Response中就是客户端的请求内容
9.服务器返回相应的文件
请求成功后，服务器返回给浏览器的文本信息，通常包括HTML、CSS、JS、图片等文件。
浏览器解析渲染页面
不同浏览器内核不同，所以渲染的过程不太一样。
webkit的渲染过程：

Gecko的渲染过程：

渲染的基本流程：
1.HTML解析DOM Tree
2.CSS解析Style Rules
3.将两者关联生成Render Tree
4.Layout根据Render Tree计算每个节点的信息
5.Painting根据计算好的信息绘制整个页面
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

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

js脚本处理
浏览器解析文档，当遇到script标签的时候，会立即解析脚本，停止解析文档（因为JS可能会改动DOM和CSS，所以继续解析会造成浪费）。
如果脚本是外部的，会等待下载完毕，再继续解析文档。现在可以在script标签上增加属性defer或者async
脚本解析会将脚本中改变的DOM和CSS的地方分别解析出来，追加到DOM Tree和Style Rules上。
呈现树（Render Tree）
Render Tree的构建其实就是DOM Tree和CSSOM attach的过程。实际上就是一个计算好的样式，与HTML对应（包括哪些显示，哪些不显示）的Tree

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

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

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

布局（Layout）
创建渲染树后，下一步就是布局（Layout），或者叫回流（reflow，relayout），这个过程就是通过渲染树中的渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对DOM进行修改，这时候可能需要重新进行布局，也可称为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或回流的方法，实现其布局或回流。
绘制（Painting）
在绘制的阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。
CSS2规范定义了绘制流程的顺序。绘制的顺序其实就是元素进入堆栈样式上下文的顺序。这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。块呈现器的堆栈顺序如下：
1.背景颜色
2.背景图片
3.边框
4.子代
5.轮廓

参考链接：
https://www.cnblogs.com/kongxy/p/4615226.html
https://segmentfault.com/a/1190000010298038
https://www.runoob.com/tcpip/tcpip-tutorial.html