从键盘输入URL到网页呈现发生了什么

1、在浏览器中输入url

2、浏览器查找域名的 IP 地址

现在我们已经输入了相应的 URL，但浏览器本身并不能识别 URL 是什么，因此从我们输入 URL 开始，浏览器就要进行域名解析来找到对应 IP——DNS 解析是浏览器的实际寻址方式：

(a) 查找浏览器缓存——近期浏览过的网站，浏览器会缓存 DNS 记录一段时间 （如果没有则往下） ；

(b) 查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息，查找是否有目标域名和对应的 IP 地址 （如果没有则往下）；

(c) 查找路由器缓存 （如果没有则往下）；

(d) 查找 ISP DNS 缓存——从网络服务商（比如电信）的 DNS 缓存信息中查找（如果没有则往下）；

(e) 经由以上方式都没找到对应 IP 的话，就会向根域名服务器查找目标 URL 对应的 IP，根域名服务器会向下级服务器转达请求，层层下发，直到找到对应的 IP 为止。

3、客户端向web服务器发送http请求

TCP/IPsanci

4、服务器处理收到的请求，将数据返回至浏览器

5、浏览器显示HTML

在上边的第4步中，服务器返回了 html 字符串给浏览器，此时，浏览器将会对其进行加载、解析、渲染并最终绘制网页：

(1) 加载：

· 浏览器对一个 html 页面的加载顺序是从上而下的；

· 浏览器在加载的过程中，同时进行解析、渲染处理；

· 在这个过程中，遇到 link 标签、image 标签、script 标签时，浏览器会再次向服务器发送请求以获取相应的 css 文件、图片资源、js 文件，并执行js代码，同步进行加载、解析。

(2) 解析、渲染：

· 解析的过程，其实就是生成 dom 树（Document Object Model 文档对象模型）；

· dom 树是由 dom 元素及属性节点组成，并且加上 css 解析的样式对象和 js解析后的动作实现；

· 渲染：就是将 dom 树进行可视化表示。

(3) 绘制网页：

· 浏览器通过渲染，将 dom 树可视化，得到渲染树；

· 构建渲染树使页面以正确的顺序绘制出来，浏览器遵循一定的渲染规则，实现网站页面的绘制，并最终完成页面的展示。