从输入 URL 到页面加载完成的过程中都发生了什么

话说这个前端面试经常问的题目，但仔细查阅了一下资料，发现想要很深入地理解，还是非常困难的，所以自己打算简单梳理一遍，不讨论过多细节，以便加深记忆。

主要流程：

1. 输入URL

首先输入URL，浏览器可能会做一些预处理，一般会根据之前的统计记录来预判输入字符可能对应的URL，比如输入bai，浏览器根据之前的浏览记录发现可能会访问www.baidu.com，从而开始建立TCP （Transmission Control Protocol）链接甚至开始渲染，输入URL后，浏览器会对URL进行检查，首先判断协议，还会判断URL的安全性，接着就准备DNS解析了。

2. DNS解析

首先了解2个概念：

• IP地址：IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码，通过 IP 地址才能确定一台主机位置。服务器本质也是一台主机，想要访问某个服务器，必须先知道它的 IP 地址，IP 地址由四个数字组成，中间用点号连接。
• 补充说明：光靠IP地址也是无法通信的，因为IP地址并非和某台设备绑定，比如你的电脑在家IP地址为192.168.1.1，但是到办公室就变成172.22.22.22 了，这就需要我们的MAC(media access control) 地址,这是固定并且唯一的。
• DNS：Domain Name System的缩写，即域名系统。它是internet提供一项服务，也叫域名解析服务，主要作用是将域名解析成对应的IP地址，域名系统分为正向解析和反向解析，正向解析就是讲域名解析成IP地址，反向是讲IP地址解析成域名，一般用于后端。

域名与IP地址之间是呈一一对应的关系，但多个域名可以对应同一个IP地址。由于IP地址全是数字，为了简单好记，采用域名来代替IP地址表示站点地址。
在Internet上，一个域名要由两台域名服务器提供“权威性的”域名解析，这两台域名服务器，和您的域名一起被登记在域名注册管理机构的数据库中，如果是国际域名，域名注册管理机构就是Internic；如果是国内域名，域名注册管理机构就是CNNIC（China Internet Network Information Center），这两台“权威性的”服务器，一主一辅，保存着相同的记录，主要是为了提高可靠性。域名注册管理机构的数据库的记录最终体现在“根”域名服务器上。

DNS解析过程：

1. 浏览器搜索自己DNS缓存
2. 从系统hosts文件中查找DNS缓存
3. 搜索路由器的DNS缓存
4. 搜索ISP中的DNS缓存
5. 如果还未找到对应IP地址，则向根服务器查找域名对应IP， 根域名服务器把请求发到下一级，直到找到IP
6. 将得到的IP返回给操作系统，同时自己也将IP地址缓存起来（这个缓存的记录有一个失效期，当失效期到了后，您的主控DNS服务器将会自动丢弃缓存的记录）
7. 操作系统将IP返回给浏览器，同时浏览器也将IP地址缓存起来

3. 通过 Socket 发送数据

• 调用 Socket API 后内核会对数据进行底层协议栈的封装，接下来启动 DMA（direct memory access）控制器，它将从内存中读取数据写入网卡。
• 连接 Wi-Fi 路由，Wi-Fi 网卡需要通过 Wi-Fi 路由来与外部通信，原理是基于无线电，通过电流变化来产生无线电，这个过程也叫「调制」，而反过来无线电可以引起电磁场变化，从而产生电流变化，利用这个原理就能将无线电中的信息解读出来就叫「解调」。因为内网设备的 IP 都是类似 192.168.1.x这样的内网地址，外网无法直接向这个地址发送数据，所以网络数据在经过路由时，路由会修改相关地址和端口，这个操作称为 NAT(Network Address Translation)映射。家庭路由一般会通过双绞线连接到运营商网络的。
• 数据过双绞线发送到运营商网络后，还会经过很多个中间路由转发，当数据传递到这些路由器后，路由器会取出包中目的地址的前缀，通过内部的转发表查找对应的输出链路
• 数据最终通过光纤进入服务器机房，最后通过交换机的端口将数据发往机架中的服务器

4. 建立连接--三次握手

• 主机向服务器发送一个建立连接的请求（您好，我想认识您）
• 服务器接到请求后发送同意连接的信号（好的，很高兴认识您）
• 主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接

5.网页请求

当服务器与主机建立了连接之后，下面主机便与服务器进行通信。网页请求是一个单向请求的过程，即是一个主机向服务器请求数据，服务器返回相应的数据的过程

• 浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等
• 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件
• 服务器将得到的 HTML 文件发送给浏览器
• 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页
• 在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML

6. 网页渲染

主流程示例

webkit主流程

简单点说就是：

• 呈现引擎将开始解析 HTML 文档，并将各标记逐个转化成“内容树”上的 DOM节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树。
• 呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
• 呈现树构建完毕之后，进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制- 呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。

1. 解析

html解析生成DOM树
浏览器中的呈现引擎（render engine）解析html文档，呈现引擎解析的语法是过程可以分为2部分：词法分析和语法分析。词法分析器（有时也称为标记生成器），负责将输入内容分解成一个个有效标记；而解析器负责根据语言的语法规则分析文档的结构，从而构建解析树。
因为常规解析器用的是与上下文无关的语法，而html语言比较“宽容”，对常见的无效html用法采取包容态度等原因，所以它的语法不是与上下文无关的语法，不能用常规解析器来解析（但css和JavaScript 可以），所以需要一些工具自动生成解析器，您只要向其提供您所用语言的语法（词汇和语法规则），它就会生成相应的解析器。WebKit 使用了两种非常有名的解析器生成器：用于创建词法分析器的 Flex 以及用于创建解析器的 Bison（您也可能遇到 Lex 和 Yacc 这样的别名）。Flex 的输入是包含标记的正则表达式定义的文件。Bison 的输入是采用 BNF 格式的语言语法规则。HTML 解析器的任务是将 HTML 标记解析成解析树。
解析器的输出“解析树”是由 DOM 元素和属性节点构成的树结构。DOM 与标记之间几乎是一一对应的关系。比如下面这段标记：

  
    

      Hello World
    
    
 ![](example.png)
  

可以翻译成下面的DOM树

CSS解析生成CSS规则树
浏览器解析器都会将 CSS 文件解析成 StyleSheet 对象，且每个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与 CSS 语法对应的对象。

CSS解析

脚本解析
网络的模型是同步的。网页作者希望解析器遇到