Skip to main content

输入一个URL到页面渲染的过程

DNS 查询:查找域名对应的 IP 地址,这个过程是操作系统自动执行的

DNS

基于 UDP 协议的

hosts 文件也是一种系统的 DNS 缓存

DNS查询的时候会先看浏览器中是否有缓存,如果有则不发起DNS查询,如果没有则读取操作系统中的HOSTS文件查找对应的映射关系,如果也没有才会发起DNS查询

假设一台主机想知道 y.abc.com 这个域名的 IP 地址,那么整个的查询过程如下:

  1. 主机先向其本地域名服务器进行递归查询
  2. 本地域名服务器采用迭代的查询,它先向根域名服务器查询
  3. 根域名服务器告诉本地域名服务器,下一次应该查询的顶级域名服务器的 IP 地址。
  4. 本地域名服务器向顶级域名服务器发起查询。
  5. 顶级域名服务器告诉本地域名服务器,下一次应查询的权限域名服务器 IP 地址
  6. 本地域名服务器向权限域名服务器发起查询。
  7. 权限域名服务器告诉本地域名服务器所查询的 IP 地址。
  8. 本地域名服务器把查询结果告诉主机

本地域名服务器

本地域名服务器相当于一个班主任,你有点啥事都找他。当一个主机发出 DNS 查询的时候,这个查询的请求就会发送到本地域名服务器。

根域名服务器

根域名服务器是最高层次的域名服务,是校长,只负责规划大方向。他知道所有顶级域名服务器的域名和 IP 地址。不管那个本地域名服务器若自己不能解析,那首先请求的就是根域名服务器。根域名服务器不会把待查询的域名直接转换成 IP,而是告诉本地域名服务器下一步应该找哪一个顶级域名服务器进行查询

顶级域名服务器

顶级域名服务器是负责各个方向的副校长,有负责安全的,有负责教学的。他负责管理该顶级域名下的所有二级域名,当收到 DNS 查询请求后就会给出响应的应答,可能是最终的结果,也可能是下一步应该找到的域名服务器的 IP 地址。

权限域名服务器

权限域名服务器就是负责一个区的域名服务器,是基层干活的,比如宿管,各科老师,他负责一个更小的区域。当一个权限服务还不能给出最后的回答时,就会告诉查询请求的 DNS 客户,下一步应该找哪个权限域名服务器。

查询方式

递归

递归查询,就是你找我要一个域名的 IP 地址,但是我不知道,那我去帮你去向知道的人问这个 IP 地址。举个例子就是,你问你班主任怎么做番茄炒鸡蛋,你班主任不知道,但是你班主任去问了食堂厨师,然后告诉你。这就叫递归查询。

从 host 到本地域名服务器一般是用的递归查询。

迭代

迭代查询就是,你找我要一个域名的 IP 地址,我也不知道这个 IP 地址,但是我知道谁知道,我告诉你去找谁问。

从本地域名服务器到根域名服务器一般是用的迭代查询。

答案

  1. DNS 查询,得到请求的域名对应的 IP 地址
  2. TCP 的三次握手,建立 TCP 链接
  3. 发送请求,服务器处理请求并返回响应的 HTML 页面
  4. 浏览器解析 HTML 文件
  5. 解析 HTML 构建 DOM 树,解析 CSS 构建 CSSOM 树,DOM 树和 CSSOM 树生成 Render 树(CSS 不会阻塞 HTML 解析,但是会阻塞浏览器渲染页面)如果遇到 script 标签的话,会判断是否存在 async 或者 defer ,前者会并行进行下载并执行 JS,后者会先下载文件,然后等待 HTML 解析完成后顺序执行。(JS 会阻塞 DOM 的解析和渲染)
  6. 在生成 Render 树的过程中,浏览器就开始调用 GPU 绘制,合成图层,将内容显示在屏幕上了。