Interview AiBoxInterview AiBox 实时 AI 助手，让你自信应答每一场面试
请详细描述从在浏览器输入URL到页面完全显示的整个过程，包括DNS解析、TCP连接、HTTP请求、页面渲染等各个环节。
题型摘要
从URL输入到页面显示的过程包括：URL解析、DNS解析（多级缓存查询）、TCP三次握手建立连接、发送HTTP请求、服务器处理请求并返回响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、构建渲染树、布局计算、页面绘制、加载其他资源、执行JavaScript，最终完成页面渲染。整个过程涉及网络通信、服务器处理和浏览器渲染三个主要环节。
从URL输入到页面显示的完整过程
1. URL解析
当用户在浏览器地址栏输入URL并按下回车后，浏览器首先会对URL进行解析，判断其合法性，并提取其中的关键信息，如协议、域名、端口、路径等。
2. DNS解析
浏览器需要通过域名获取服务器的IP地址，这个过程称为DNS解析：
- 浏览器缓存检查：首先检查浏览器自身的DNS缓存中是否有该域名对应的IP地址。
- 操作系统缓存检查：如果浏览器缓存中没有，则检查操作系统的DNS缓存。
- 路由器缓存检查：如果操作系统缓存中也没有，则检查路由器的DNS缓存。
- ISP DNS服务器查询：如果本地缓存都没有，则会向ISP（互联网服务提供商）的DNS服务器发送查询请求。
- 递归查询：如果ISP DNS服务器没有该域名的记录，它会向根域名服务器发起递归查询，依次经过顶级域名服务器、权威域名服务器，最终获取到域名对应的IP地址。
3. 建立TCP连接
获取到服务器的IP地址后，浏览器会与服务器建立TCP连接，这个过程称为"三次握手"：
- 第一次握手：浏览器向服务器发送一个SYN包（同步序列编号），请求建立连接。
- 第二次握手：服务器收到SYN包后，回复一个SYN+ACK包，表示确认收到请求并同意建立连接。
- 第三次握手：浏览器收到服务器的SYN+ACK包后，再发送一个ACK包，确认连接建立。
4. 发送HTTP请求
TCP连接建立后，浏览器会向服务器发送HTTP请求。HTTP请求包括请求行、请求头和请求体（可选）。
- 请求行：包含请求方法（GET、POST等）、请求的URL和HTTP协议版本。
- 请求头：包含一些附加信息，如User-Agent、Accept、Cookie等。
- 请求体：对于POST请求等，可能包含请求的数据。
5. 服务器处理请求
服务器接收到HTTP请求后，会进行处理：
- 解析请求：服务器解析HTTP请求，获取请求的方法、URL、头部信息等。
- 处理请求：根据请求的内容，服务器可能会查询数据库、执行业务逻辑等。
- 生成响应：服务器处理完请求后，会生成HTTP响应，包括状态码、响应头和响应体。
6. 服务器返回HTTP响应
服务器将HTTP响应发送回浏览器：
- 状态行：包含HTTP协议版本、状态码和状态描述。
- 响应头：包含一些附加信息，如Content-Type、Content-Length、Set-Cookie等。
- 响应体：包含请求的实际内容，如HTML、CSS、JavaScript、图片等。
7. 浏览器解析HTML
浏览器接收到HTTP响应后，开始解析HTML文档：
- 构建DOM树：浏览器将HTML解析成DOM树（Document Object Model）。
- 解析CSS：浏览器同时解析CSS，构建CSSOM树（CSS Object Model）。
- 构建渲染树：将DOM树和CSSOM树结合，构建渲染树（Render Tree）。
- 布局：计算渲染树中每个节点的位置和大小（Layout/Reflow）。
- 绘制：将渲染树绘制到屏幕上（Paint）。
8. 浏览器加载其他资源
在解析HTML的过程中，浏览器会遇到其他资源的引用，如CSS、JavaScript、图片等，会继续发起请求获取这些资源：
- CSS文件：浏览器会异步加载CSS文件，并解析构建CSSOM树。
- JavaScript文件：浏览器会加载并执行JavaScript文件，可能会修改DOM树和CSSOM树。
- 图片等资源：浏览器会异步加载图片等资源，并在加载完成后显示。
9. 执行JavaScript
浏览器在解析HTML时，遇到<script>标签会暂停HTML解析，转而加载和执行JavaScript：
- 阻塞解析：传统的
<script>标签会阻塞HTML解析，直到脚本加载和执行完成。 - 异步加载：使用
async或defer属性可以让JavaScript异步加载，不阻塞HTML解析。 - DOM操作：JavaScript可以操作DOM，修改页面内容和结构。
- 事件处理：JavaScript可以添加事件监听器，响应用户交互。
10. 页面渲染完成
当所有资源加载完成，DOM树构建完成，CSSOM树构建完成，JavaScript执行完成后，页面就完全渲染并显示给用户。
参考文档
思维导图
Interview AiBoxInterview AiBox — 面试搭档
不只是准备，更是实时陪练
Interview AiBox 在面试过程中提供实时屏幕提示、AI 模拟面试和智能复盘，让你每一次回答都更有信心。
AI 助读
一键发送到常用 AI
从URL输入到页面显示的过程包括：URL解析、DNS解析（多级缓存查询）、TCP三次握手建立连接、发送HTTP请求、服务器处理请求并返回响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、构建渲染树、布局计算、页面绘制、加载其他资源、执行JavaScript，最终完成页面渲染。整个过程涉及网络通信、服务器处理和浏览器渲染三个主要环节。
智能总结
深度解读
考点定位
思路启发
相关题目
请解释TCP三次握手的过程。
TCP三次握手是建立可靠网络连接的关键过程，通过SYN、SYN+ACK和ACK三个数据包的交换，确保客户端和服务端都具备收发能力并同步序列号。第一次握手客户端发送SYN包并进入SYN_SENT状态；第二次握手服务端回复SYN+ACK包并进入SYN_RCVD状态；第三次握手客户端发送ACK包，双方都进入ESTABLISHED状态，连接建立完成。三次握手而非两次或四次的设计是为了在保证可靠性的同时避免不必要的延迟和潜在问题。
TCP和UDP有什么区别？
TCP和UDP是两种核心的传输层协议，主要区别在于：TCP是面向连接的可靠传输协议，通过三次握手建立连接，提供确认重传、流量控制和拥塞控制机制，保证数据不丢失、不重复、按序到达，适用于文件传输、电子邮件等高可靠性场景；UDP是无连接的不可靠传输协议，无需建立连接，直接发送数据报，不保证数据可靠性，但传输速度快、开销小，适用于实时音视频、在线游戏、DNS查询等实时性要求高的场景。选择哪种协议取决于应用对可靠性和实时性的需求权衡。
什么是跨域问题？如何解决前端跨域请求？
跨域问题是浏览器的同源策略导致的，限制了一个域的文档或脚本获取另一个域的资源。常见解决方案包括：JSONP（利用script标签无跨域限制）、CORS（通过HTTP头部控制访问权限）、代理服务器（同源转发）、WebSocket（双向通信协议）、postMessage（跨文档通信）、document.domain（设置相同主域）和window.name（利用窗口名称特性）。选择方案时需考虑兼容性、安全性和场景需求，现代应用首选CORS，实时通信可选WebSocket，无法控制服务器时可考虑代理。
什么是跨域？有哪些解决跨域的方法？
跨域是Web开发中因浏览器同源策略导致的限制，当协议、域名或端口不同时发生。解决跨域的主要方法有：1) CORS（跨域资源共享），通过服务器设置HTTP响应头实现，是最推荐的标准化方案；2) JSONP，利用script标签跨域特性，但仅支持GET请求；3) 代理服务器，通过同源服务器转发请求；4) WebSocket，双向通信协议，不受同源限制；5) postMessage，HTML5 API，用于窗口间安全通信；6) document.domain，适用于子域间通信；7) window.name和location.hash，利用浏览器特性实现但安全性较低。选择方案需考虑安全性、兼容性、通信类型和实现复杂度等因素。
请详细解释HTTPS的工作原理和加密过程。
HTTPS是HTTP的安全版本，通过SSL/TLS协议实现数据加密、身份验证和完整性保护。其工作原理主要分为两个阶段：SSL/TLS握手阶段和数据传输阶段。在握手阶段，客户端和服务器协商加密算法、验证服务器身份并生成会话密钥；在数据传输阶段，使用会话密钥进行对称加密通信。HTTPS结合了对称加密（效率高）和非对称加密（安全密钥交换）的优点，通过数字证书验证服务器身份，防止中间人攻击，并使用哈希函数保证数据完整性。随着网络安全意识的提高，HTTPS已成为网站的标准配置。