一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
著名前端面试题:
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
这一题是在挖掘你的知识边界,所以你知道多少就要答多少。
可以先查阅一些资料再查,但是不要把自己不懂的东西放在答案里,面试官会追问的。
1. DNS解析
DNS 解析的过程就是根据域名查找 IP 地址。
首先浏览器会查询浏览器缓存和本地 HOST 文件是否有该域名对应的 IP 地址,如果没有,浏览器把 URL 提交到 DNS 服务器进行解析,我们输入的 URL 的域名会被解析成 IP 地址,从而可以向该 IP 地址建立连接。具体过程如下所示:
-
查询浏览器的 DNS 缓存中是否有目标域名的相关信息。
-
查询本机的 HOST 文件中是否有目标域名的信息。
-
查询本地的路由器中的 DNS 缓存中是否有目标域名的信息。
-
查询 DNS 服务器中是否有目标域名的信息,如果没有,DNS 服务器会向根域名服务器查找,根域名服务器还可以把请求转发给下一级,直到找到对应的 IP 为止。
浏览器会把获取的 IP 地址缓存,以便下次直接访问。
2. TCP连接
在得到服务器的 IP 地址后,浏览器接下来开始连接。
TCP连接的正常建立过程通信双方需要三次握手:
-
客户端进程向服务器进程发出连接请求。
-
服务端收到客户端发来的请求报文后,若同意建立连接,则向客户端发送确认。
-
客户端进程收到服务端进程的确认报文后,还要向服务端发出确认信息。
经历三次握手后,主机与服务器建立了连接。
3. 发送 HTTP 请求
浏览器根据 URL 内容生成 HTTP 请求,HTTP 报文被包裹在 TCP 报文中发送 ,服务器收到 TCP 报文是会解包提取出 HTTP 报文。
4. 服务器响应
服务器处理请求并返回 HTTP 报文。浏览器负责下载内容。
5. 浏览器解析渲染页面
浏览器解析 HTML 代码,并请求 HTML 代码中的资源。
-
HTML 代码转化成 DOM。
-
CSS 代码转化成 CSSOM。
-
结合 DOM 和 CSSOM,生成一棵渲染树(Render Tree)。
-
生成布局(layout),计算出 Render Tree 每个节点的具体位置。
-
将布局绘制在屏幕上。