面试经验-从输入URL到页面加载发生什么？

最新推荐文章于 2023-07-04 18:52:59 发布

风玉-腾达

最新推荐文章于 2023-07-04 18:52:59 发布

阅读量234

点赞数

分类专栏：面试心得及总结文章标签：面试前端 javascript

本文链接：https://blog.csdn.net/fengyupotest/article/details/129278263

版权

面试心得及总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

流程

在浏览器中输入URL，到页面加载完成，这个过程包含了多个步骤。下面是一个大致的流程：

1、DNS解析：浏览器会先将输入的URL发送到本地DNS服务器进行解析，获取对应的IP地址。
2、TCP连接：浏览器使用HTTP协议与Web服务器建立TCP连接，通过三次握手确认连接的建立。
3、发送HTTP请求：浏览器向Web服务器发送HTTP请求，包括请求方法、请求头、请求体等信息。请求方法常用的有GET和POST方法，请求头包含了请求的各种信息，如User-Agent、Accept、Cookie等，请求体一般用于POST请求，用于传递表单数据等信息。
4、服务器响应：Web服务器收到请求后，根据请求内容生成相应的HTTP响应，并将响应发送回浏览器。
5、接收响应：浏览器接收到Web服务器的响应后，根据响应内容进行处理。如果响应头中包含了重定向信息，浏览器会再次向重定向的URL发送请求。
6、解析HTML：浏览器解析HTML代码，构建DOM树，并解析CSS、JavaScript等资源。
7、渲染页面：浏览器根据DOM树和CSS样式信息渲染页面，并执行JavaScript代码，最终呈现出完整的页面。
8、关闭连接：浏览器关闭TCP连接，断开与Web服务器的连接。

各个节点，深入操作情况

1、DNS解析：在进行DNS解析时，浏览器首先会检查本地DNS缓存中是否有该域名对应的IP地址。如果缓存中有，就直接返回结果；否则，就向本地DNS服务器发出请求，获取域名对应的IP地址。如果本地DNS服务器也没有缓存记录，就会向其他上级DNS服务器发出请求，进行递归查询，最终获取域名对应的IP地址。

2、TCP连接：TCP连接的建立需要经过三次握手过程。在第一次握手时，客户端向服务器发送SYN包，请求建立连接。服务器接收到SYN包后，向客户端发送ACK包和SYN包，表示接收到了请求，并回应请求。在第二次握手时，客户端接收到ACK和SYN包后，向服务器发送ACK包，表示接收到了回应。在第三次握手时，服务器接收到ACK包后，连接建立完成。

3、发送HTTP请求：发送HTTP请求时，常用的请求方法有GET和POST方法。GET方法用于请求资源，POST方法用于提交表单数据等信息。在发送请求时，还可以通过请求头部信息传递一些额外的参数，如User-Agent、Accept-Encoding、Cookie等。

4、服务器响应：Web服务器在接收到请求后，会生成相应的HTTP响应，并将响应返回给客户端。HTTP响应通常包含响应状态码、响应头、响应体等信息。响应状态码用于表示服务器对请求的处理结果，如200表示请求成功，404表示请求的资源不存在，500表示服务器内部错误等。

5、解析HTML：在解析HTML代码时，浏览器会先进行语法分析，将HTML代码转换为DOM树。DOM树由多个节点构成，包括文本节点、元素节点、属性节点等。浏览器还会解析CSS样式信息，根据样式信息计算出每个元素的位置、大小、颜色等属性。在解析JavaScript代码时，浏览器会执行JavaScript代码，并根据执行结果对DOM树进行修改。

6、渲染页面：在渲染页面时，浏览器会根据DOM树和CSS样式信息绘制出页面的布局。渲染过程包括布局计算、绘制、重绘等步骤。在渲染完成后，浏览器会将页面呈现给用户。