在浏览器中输入URL回车后都发生了什么？

一：解析URL

URL(Universal Resource Locator): 统一的资源定位符。俗称网页地址或者网址。

URL用来表示某个资源的地址

URL主要由以下几个部分组成：

• a.传输协议
• b.服务器
• c.域名
• d.端口
• e.虚拟目录
• f.文件名
• g.锚
• h.参数

浏览器首先对拿到的URL进行识别，并抽取域名字段

二：DNS解析

DNS解析（域名解析），DNS实际上是一个域名和IP对应的数据库。

IP地址很难被记住，但机器间互相只认识IP地址，于是人们发明了域名，让域名与IP地址之间一一对应，他们之间的转换工作成为域名解析，域名解析需要由专门的域名解析服务器来完成，整个过程是自动进行的。

浏览器输入IP地址访问，是直接从主机上调取内容的。输入域名则是通过域名解析得到对应的IP地址，再从主机上调取内容的。

DNS解析会经历以下步骤：

1. 查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟），如果没有，继续往下
2. 检查系统缓存，检查hosts文件，这个文件会缓存一些以前访问过的网站的域名和IP数据。它就像一个本地的数据库，如果找到了就直接获取IP，没有则继续往下
3. 检查路由器缓存，路由器都有自己的DNS缓存，可能就包括这些查询的内容，如果没有继续向下
4. 递归查询: 从根域名服务器服务器到顶级域名服务器再到极限域名服务器依次搜索对应域名的IP

通过以上查找拿到IP地址以后就可以与服务器建立连接了

三：浏览器与服务器建立TCP连接（三次握手）

第一次握手：客户端向服务器发送请求(SYN=1)，等待服务器确认;

第二次握手：服务器收到客户端请求并确认，回复一个指令（SYN=1,ACK=1）;

第三次握手：客户端收到服务器回复的指令，并返回确认（ACK=1）

通过三次握手，建立了客户端与服务器之间的链接。

四：发送请求和传输数据

比如要通过get请求访问“http://www.dydh.org”,通过抓包可以看到：

• 请求网址（url) : http://www.dydh.org
• 请求方法：GET
• 远程地址：IP
• 状态码：200 OK
• Http版本：HTTP/1.1
• 请求头：...
• 响应头：...

响应头中有一个：set-cookie:' ',当下次访问相同网站时：请求头中就包含了这个cookie信息

五：浏览器渲染页面

客户端拿到服务器端传输的文件，找到HTML和MIME文件，通过MIME文件（用于让浏览器判断用何种引擎处理），浏览器要知道要用页面渲染引擎来处理HTML文件。

1. 浏览器会解析html源码，然后创建一个DOM树。

      在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。

      2. 浏览器解析css代码，计算出最终的样式数据，形成css对象模型CSSOM

      首先会忽略非法的css代码，之后按照浏览器默认设置——用户设置——外联样式——内联样式——HTML中的style样式顺序进行渲染

      3. 利用DOM和CSSOM构建一个渲染树

         渲染树和dom数很类似，但是有区别

         dom树完全和html一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head,display:none等

         而且渲染树的每一个节点都存储有对应的css属性

 4. 渲染树创建完成之后，浏览器根据渲染树进行布局,布局流程输出的是一个盒模型，它会精确的捕获每个节点在盒模型中确切的尺寸和位置。这一行为被称为回流和自动重排。

5.布局完成之后，浏览器会立即发出 paint setup事件，将渲染树转换为屏幕上的像素，这一过程称为绘制，这个时候页面就会显示在我们的屏幕上。

注意：回流必定会引发重绘

常见的回流的情况：节点的位置宽高发生变化，display:none,节点内容变化，浏览器窗口大小发生变化

常见的重绘的情况：节点颜色，背景，visiblility, transform,box-shadow阴影等

参考：https://www.bilibili.com/video/BV1aN411o7ah?from=search&seid=10517125488136358101