携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第N天，点击查看活动详情 >>PS：第6天。

 1、DNS 解析（域名 -> IP）

浏览器缓存 -> hosts文件或系统缓存 -> 外部缓存（例如路由器） -> 对应的域名服务器查找并解析

知识了解

1.IP地址

• IP地址指互联网协议地址。如果把“一台电脑”比作“一台电话”，那么“IP地址”就相当于“电话号码”。
• IP地址是固定长度的，域名是不固定的。IPV4的地址长度为32位，IPV6的地址长度为128位。
• IP地址难以记忆，而域名便于用户记忆。IP地址是面向主机的，而域名是面向用户的。

2.host文件：

• 保存IP地址和域名的一一对应关系.

3.DNS协议

• DNS是进行域名和与之相对应的IP地址转换的系统。当用户输入域名时，会自动查询DNS服务器→检索数据库→IP地址。

**4.域名服务器 **

• 层次从高到低依次为：根域名服务器，顶级域名服务器，权限域名服务器，本地域名服务器。

DNS解析过程

• 1.当用户在浏览器里输入一个域名时，默认优先查找浏览缓存，看缓存中是否有域名对应的IP地址；
• 2.当浏览中找不到时，会检测系统中的hosts文件是否有对应的IP协议；
• 3.若hosts文件中没有这个域名的映射，则查找本地DNS服务器；
• 4.若没有，通过DNS服务器的根域名服务器进行查找，根据域名服务器返回可以查询的域名服务器IP地址；
• 5.顶级域名服务器返回DNS相应消息；
• 6.主机收到响应消息后，可以正常访问该服务器了。

2. 建立 TCP 连接，三次握手

目的： 是为了让对方知道自己具备【收】【发】信息的能力，仅自己知道是没有意义的！

3.浏览器向服务器发送请求（请求报文）

4.服务器向浏览器返回响应（响应报文）

5.断开 TCP 连接，四次挥手

目的： 4 次挥手的目的是断开链接时保证传输数据的完整性！

6.渲染页面

• (1) 遇见 HTML 标记，调用 HTML 解析器，处理 HTML 标记并构建 DOM 树
• (2) 遇见 style/link 标记，调用 CSS 解析器，处理 CSS 标记并构建 CSS 树
• (3) 将 DOM 与 CSS 合并成一个render渲染树
• (4) 根据渲染树来布局，以计算每个节点的几何信息（reflow，回流/重排）
• (5) 将各个节点绘制到屏幕上（repaint，重绘）

DOM 树和 CSSOM 构建是 CPU 完成的，最后生成合成树是 GPU 来渲染的

如果 DOM 或 CSS被修改，您只能再执行一遍以上所有步骤，以确定哪些像素需要在屏幕上进行重新渲染！