浏览器输入url后执行的整个过程（详细解析）

---

前言

这个问题也是老生常谈了，更是经常被作为面试的压轴题出现。在此稍微全面一点记录下。

一、网页重定向（Redirect）

检查网页重定向

• URL 重定向 （也称为 URL 转发 ）是一种为页面、表单或者整个 Web 站点/应用提供多个 URL 地址的技术。
• 当实际资源（如单个页面、表单或者整个 Web 应用）被迁移到新的 URL 下的时候，保持（原有）链接可用的技术。

使用情景

• 站点维护或停机期间的临时重定向。
• 永久重定向将在更改站点的 URL，上传文件时的进度页等之后保留现有的链接/书签。
• 上传文件时的表示进度的页面。

二、获取本地缓存（AppCache）

• 浏览器会先查找当前URL的DNS缓存记录（浏览器缓存、系统缓存、路由缓存）。如存在缓存，就直接显示。如果没有，接着下一步
• 浏览器缓存：简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。

三、域名解析（DNS）

DNS解析——解析域名，获取对应的ip地址（互联网协议地址）

什么是域名解析？过程是怎样的？

例如https://www.blog.youkuaiyun.com/的解析

查询缓存

• 浏览器缓存：浏览器会按照一定的频率缓存DNS记录（如有直接获取）
• 操作系统缓存：浏览器缓存中没有记录，再到本地操作系统缓存中查询，一般在hosts文件（如有直接获取）
• 路由缓存：路由器也有DNS缓存（如有直接获取）

ISP的DNS服务器

-ISP的DNS服务器：ISP（Internet Service Provider），是互联网服务提供商的简称。ISP有专门的DNS服务器对应DNS查询请求。

根服务器

根服务器：如果ISP的DNS服务器没有找不到，ISP会代替用户向根服务器发起查询请求。根域名服务器会返回.net域名服务器的ip地址，然后访问.net域名服务器获取blog.youkuaiyun.com域名服务器的ip地址，最后在访问blog.youkuaiyun.com域名服务器获取www.blog.youkuaiyun.com的ip地址，最后DNS域名解析完成。
DNS递归查询（可能存在负载均衡导致每次IP不⼀样）

四、建立TCP连接（TCP三次握手）

什么是TCP？

• TCP是传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。

网络七层模型

• 应用层（ftp，http，smtp，pop3）
• 表示层
• 会话层
• 传输层（TCP）
• 网络层（IP）
• 数据链路层
• 物理层

TCP的三次握手

• 客户端发送有待带有SYN=1，Seq=x的syn包到服务器，并进入到SYN_SEND状态，等待服务器确认。（客户端–服务器。您好，您好漂亮呀，我想认识您！）
• 服务器收到syn包后，必须确认客户的SYN（ack=x+1），同时发送一个自己的SYN（seq=k）包给客户端（即SYN+ACK包），同时服务器进入到SYN_RECV状态。（服务器–客户端。好的，很高兴认识您，当然您也是蛮帅的哦！）
• 客户端收到服务器的SYN+ACK包后，向服务器发一个确认包ACK（k+1），这些包发送完毕后，客户端和服务器同时进入到ESTABLISHED状态，完成三次握手。（客户端–服务器。啊哈哈哈，我也很高兴认识您）

Tips：TCP在握手过程中不会携带任何数据，三次握手完成之后，才会进行数据的传递。（即三次握手之后，浏览器才发送Http请求）

为什么需要三次握手？

• 引用《计算机网络》说的，“三次握手“的目的是“为了防止已经失效的连接请求报文突然又传送到了服务端，因而产生了错误”。
• 即客户端与服务器的连接存在时效性，过了预定时间，就放弃等待，各自干别的事了。

那为什么不是四次而是三次呢？

• 因为服务器的ACK和SYN包是可以一起发送的，并不会产生什么不好的影响，何乐而不为是吧？

五、浏览器发送http请求

建立TCP连接后，客户端就可以向服务端发送http请求报文了。

请求报文（包含三部分）：

请求行

请求行包含

• 请求方法
• URL
• 协议版本
  例：POST /demo/index.html HTTP/1.1

请求方法有哪些?

• get
• post
• put
• delete
• patch
• head
• options
• trace

请求头

请求头包含了请求的附加信息，一般以key:value的形式存在。比如关于客户端的信息，host（主机名）。

请求主体。

请求体包含了多个请求参数的数据，包含了回车符、换行符、请求数据（不是所有的请求都带有请求数据）。

六、服务器响应http请求

服务器会检查HTTP请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态码

服务器收到请求后处理请求，并返回响应报文数据。

响应报文包含三部分

• 响应行：包含协议版本，状态码，状态码描述
• 响应头：包含一些附加的响应信息
• 响应主题：包含回车符、换行符和响应返回的数据（不是所有的响应都有响应数据）

七、断开TCP连接（TCP四次挥手）

浏览器接收HTTP响应后，根据实际情况选择关闭TCP连接或者保留重⽤，关闭TCP连接的四次握⼿如下：

• 浏览器向服务器发送报文（Fin=1，Ack=z，Seq=x），表示客户端请求报文已经发送完了，准备关闭了。并进入到FIN_WAIT_1状态。，即断开连接的请求（太阳下山了，我该回家干饭了）到服务器
• 服务器收到客户端的断开请求后，发送确认报文（Ack=x+1，Seq=z），表示统一关闭。此时主机进入FIN_WAIT_2状态。，即服务器接到请求后发送确认收到请求的信号（哦，我知道了）
• 服务器在发送完数据以后，也会向客户端发送断开连接的报文（Fin=1，Ack=x，Seq=y），表示我没有响应数据要传了，准备关闭了。此时进入到LAST_ACK状态，即服务器向浏览器发送断开通知（你走吧，我也该回家抱娃了）；
• 客户端收到服务器的关闭请求后，会发送一个确认报文（Ack=y+1，Seq=x），表示同意关闭。服务器收到客户单的确认报文后关闭连接。而浏览器在等待一段时间后未收到回复，则正常关闭。，即客户端接到断开通知后断开连接并反馈一个确认信号（嗯，走咯），服务器收到确认信号后也断开连接；

Tips：为什么不能三次挥手？有可能数据还未传输完成，所以服务器要先确认后再发起断开消息

八、浏览器解析http请求返回的数据并渲染页面

浏览器解析htm代码，并请求html代码中的资源(如js、css、图片等）

浏览器接收到 HTTP 数据包后的解析流程（解析 html、 词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成render 树，然后layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）

回流：当某个元素的尺寸大小或是位置信息发生改变的时候，会触发回流，对元素的大小和位置进行重新计算。
重绘：当某个元素的背景颜色，文字颜色或是其他不影响周围或内部布局的属性发生改变时会触发重绘。

注：回流一定会包含着重绘，而重绘不一定会包含回流。

解析HTML⽂档

浏览器在接收到服务器返回的HTML文件后，会对其进行HTML解析。

构件DOM树

浏览器的HTML解析器把HTML解析成DOM 树（根据HTML文件的结构从上到下解析HTML，HTML元素以深度优先的方式进行解析）

• Tokenizing：根据HTML规范将字符流解析为标记
• Lexing：词法分析将标记转换为对象并定义属性和规则
• DOM construction：根据HTML标记关系将对象组成DOM树

下载资源

解析HTML过程中遇到图⽚、样式表、js⽂件，会启动下载

构造CSSOM树

• Tokenizing：字符流转换为标记流
• Node：根据标记创建节点
• CSSOM：节点创建CSSOM树

根据DOM树和CSSOM树构建渲染树

• 从DOM树的根节点遍历所有可⻅节点（不可见的有script , meta 的标签。css隐藏的节点，如 display: none等）
• 给每⼀个可⻅节点，找到对应的CSSOM规则并应⽤
• 发布可视节点的内容和计算样式

执⾏js脚本

JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作 ⽤域链、回收机制等等）

• script、link、style等标签会在解析过程产生阻塞
• 外部样式会阻塞内部脚本的执行
  外部样式和外部脚本可以并行加载，但是外部样式会阻塞外部脚本执行
  如果外部脚本带有async属性，则外部脚本的加载与执行不受外部样式影响
  如果link标签是动态创建生成，不管有无async属性，都不会阻塞外部脚本的加载和执行。
• 浏览器在Document对象上触发DOMContentLoaded事件
• 此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊ 并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发 load事件

九、页面加载完成

• HTML解析过程中会逐步显示⻚⾯（如果未做特殊处理，例如添加全局Loading）
• 页面完成加载

---

总结

结合上述，浏览器输入url后执行的整个过程大致步骤如下表

步骤	描述	属性值
①	检查网页重定向	Redirect
②	检查本地缓存	AppCache
③	DNS解析，查询对应的ip地址	DNS
④	建立TCP连接（TCP三次握手）	TCP
⑤	浏览器发送http请求	Content Download 浏览器解析htm代码，并请求html代码中的资源（如js、css、图片等）
⑥	服务器响应http请求
⑦	断开TCP连接（TCP四次挥手）	Disconnect TCP
⑧	Dom加载	DOMContentLoaded
⑨	页面加载完成（页面load）	Loaded