著名前端面试题:

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

这一题是在挖掘你的知识边界,所以你知道多少就要答多少。

可以先查阅一些资料再查,但是不要把自己不懂的东西放在答案里,面试官会追问的。

1. DNS解析

DNS 解析的过程就是根据域名查找 IP 地址。

首先浏览器会查询浏览器缓存和本地 HOST 文件是否有该域名对应的 IP 地址,如果没有,浏览器把 URL 提交到 DNS 服务器进行解析,我们输入的 URL 的域名会被解析成 IP 地址,从而可以向该 IP 地址建立连接。具体过程如下所示:

  1. 查询浏览器的 DNS 缓存中是否有目标域名的相关信息。

  2. 查询本机的 HOST 文件中是否有目标域名的信息。

  3. 查询本地的路由器中的 DNS 缓存中是否有目标域名的信息。

  4. 查询 DNS 服务器中是否有目标域名的信息,如果没有,DNS 服务器会向根域名服务器查找,根域名服务器还可以把请求转发给下一级,直到找到对应的 IP 为止。

浏览器会把获取的 IP 地址缓存,以便下次直接访问。

2. TCP连接

在得到服务器的 IP 地址后,浏览器接下来开始连接。

TCP连接的正常建立过程通信双方需要三次握手:

  1. 客户端进程向服务器进程发出连接请求。

  2. 服务端收到客户端发来的请求报文后,若同意建立连接,则向客户端发送确认。

  3. 客户端进程收到服务端进程的确认报文后,还要向服务端发出确认信息。

经历三次握手后,主机与服务器建立了连接。

3. 发送 HTTP 请求

浏览器根据 URL 内容生成 HTTP 请求,HTTP 报文被包裹在 TCP 报文中发送 ,服务器收到 TCP 报文是会解包提取出 HTTP 报文。

4. 服务器响应

服务器处理请求并返回 HTTP 报文。浏览器负责下载内容。

5. 浏览器解析渲染页面

浏览器解析 HTML 代码,并请求 HTML 代码中的资源。

  1. HTML 代码转化成 DOM。

  2. CSS 代码转化成 CSSOM。

  3. 结合 DOM 和 CSSOM,生成一棵渲染树(Render Tree)。

  4. 生成布局(layout),计算出 Render Tree 每个节点的具体位置。

  5. 将布局绘制在屏幕上。