前端面试题78（一个页面输入URL到页面加载显示完成过程都发生了什么）

当您在浏览器中输入URL并按下回车键后，直到网页完全加载显示，这个过程中会发生一系列复杂的步骤。以下是这一过程的详细说明：

1. 域名解析：

   • 浏览器首先检查本地缓存（包括DNS缓存）中是否已存储了该URL对应的IP地址。如果找到，则直接使用该IP地址。
   • 如果本地缓存中没有，浏览器会向本地DNS服务器发送DNS请求，查询该域名对应的IP地址。
   • 本地DNS服务器如果没有记录，会向上级DNS服务器进行查询，这一过程可能需要多次迭代，直至找到负责该域名的权威DNS服务器并获取到IP地址。
   • 获取到IP地址后，本地DNS服务器将结果返回给浏览器，并通常会缓存该结果以加速后续访问。

2. 建立TCP连接：

   • 浏览器使用获取到的IP地址与服务器建立TCP连接（对于HTTPS网站，还会先进行SSL/TLS握手以加密通信）。

3. 发送HTTP/HTTPS请求：

   • 建立连接后，浏览器向服务器发送HTTP或HTTPS请求。请求中包含诸如请求方法（通常是GET）、请求的URL、浏览器信息、接受的内容类型等信息。

4. 服务器处理请求：

   • 服务器接收到请求后，根据请求内容处理请求。这可能涉及数据库查询、服务器端脚本执行（如PHP、Node.js等）等操作。

5. 服务器响应：

   • 处理完成后，服务器将响应数据（包括状态码、响应头和响应体）发送回浏览器。响应体可以是HTML文档、图片、视频等资源。

6. 渲染页面：

   • 浏览器接收到响应后开始解析HTML文档，构建DOM树。
   • 浏览器同时解析CSS文件，构建CSSOM（CSS对象模型）。
   • 将DOM和CSSOM合并生成渲染树（Render Tree），计算每个节点的布局（Layout）。
   • 根据渲染树和计算出的布局对页面进行绘制（Painting），最终在屏幕上展示页面。

7. 加载额外资源：

   • 在解析HTML过程中，浏览器遇到如图片、JavaScript、CSS等外部资源的链接，会发起额外的HTTP/HTTPS请求来下载这些资源。
   • JavaScript可能会修改DOM结构或样式，导致重新布局和绘制，这一过程称为重排（reflow）和重绘（repaint）。
   • 加载JavaScript时，如果脚本设置了async或defer属性，会影响页面的加载和执行顺序。

8. 页面加载完成：

   • 当初始HTML文档及所有引用的资源（如图片、脚本等）都已成功下载并处理完毕，浏览器认为页面加载完成，触发DOMContentLoaded事件（文档加载完成，但可能还有异步资源在加载）和load事件（所有资源包括图片等都已完成加载）。

以上就是从输入URL到页面完全加载显示的大致流程。