从输入URL到页面的展示到底发生了什么（面试高频！！！）

无限大6
54 阅读7分钟

从输入URL到页面的展示到底发生了什么

声明：本文是用于细节解析的，如果各位想看精简版，可以去各大平台搜索相关的内容。

一、解析URL

当用户在浏览器中输入一个URL（统一资源定位符），浏览器首先将其进行解析。URL通常由以下几个部分组成：

  • 协议：如HTTP或HTTPS，定义了数据传输的格式。
  • 主机名：指向提供资源的服务器，如www.example.com。
  • 路径：定位服务器上具体资源的位置，如/index.html。
  • 查询参数：用于传递额外的信息，如?search=java。

解析完成后，浏览器提取出主机名以进行下一步。

二、浏览器缓存检查

在发送网络请求之前，浏览器会首先检查缓存中是否有该资源。如果在缓存中找到了对应的资源，浏览器会直接返回缓存内容，避免不必要的网络请求。这一机制显著提高了访问速度，减少了延迟。

三、DNS解析

如果缓存中没有该资源，浏览器将进行DNS（域名系统）解析，以获取请求域名的IP地址。DNS的主要任务是将人类可读的域名转换为计算机可读的IP地址。这一过程通常涉及以下步骤： 注意：进行DNS同样是在网络请求前

  1. 本地DNS缓存：浏览器首先检查自己的缓存，看看之前是否已解析过该域名。
  2. 本地Host文件：若本地缓存中不存在，将查询本地Host文件。
  3. 路由器缓存：接着查询路由器缓存。
  4. DNS服务器：若仍未找到，将请求发送给DNS服务器。
  5. 根DNS服务器：若本地DNS不能解析，将向根DNS服务器、顶级域名服务器（如.com）和权威DNS服务器逐层查询，最终获取对应的IP地址。

四、建立连接

获取到IP地址后，浏览器需建立与目标服务器的连接。通常采用TCP（传输控制协议）建立三次握手，具体步骤如下：

  1. SYN：客户端发送连接请求（SYN）到服务器。
  2. SYN-ACK：服务器响应连接请求，并确认（SYN-ACK）。
  3. ACK：客户端确认连接建立（ACK）。

在使用HTTPS时，还需进行TLS（传输层安全）握手，以确保数据的机密性和安全性。

五、发送HTTP请求

连接建立后，浏览器向服务器发送HTTP请求。请求包含以下几部分：

  • 请求方法：如GET或POST，指定请求的类型。
  • 请求行：包括请求的URL和HTTP版本。
  • 请求头：包含浏览器版本、支持的内容类型等信息，以及与该域名相关的Cookie等数据。
  • 请求体：在POST请求中，包含发送的数据。

六、服务器处理请求

服务器接收到请求信息后，开始处理请求。此时，可能涉及以下内容：

  1. 负载均衡：若请求的服务器负载较高，可能会将请求转发到其他服务器。
  2. 安全拦截：防火墙或安全设备会检查请求，确保没有恶意内容。
  3. 后台处理：服务器根据请求的内容进行相应的逻辑处理，可能访问数据库、调用其他服务等。

七、后台与前台的HTTP交互

服务器处理完请求后，返回HTTP响应。这一响应通常包括以下内容：

  • 状态码：如200（成功）、404（未找到）等，指示请求的处理结果。
  • 响应头：提供关于响应的信息，如内容类型、服务器类型、Cache-Control、ETag等。
  • 响应体：包含请求的具体资源内容，通常是HTML文档。

响应头部的特点

在响应中，响应头部包含了多种重要信息，帮助浏览器理解如何处理响应。例如：

  • Content-Type：指示响应体的类型（如text/html, application/json）。
  • Set-Cookie：用于设置会话Cookie。
  • Cache-Control：提供缓存策略的信息，例如“no-cache”表示不使用缓存。
  • ETag：提供资源的版本标识，用于进行条件请求。

八、响应处理与重定向

浏览器接收服务器的HTTP响应后，会解析响应头，并根据状态码进行相应的处理：

  • 重定向：如果状态码为301或302，浏览器会自动重定向到新的URL。这是通过再次解析新的URL并进行新的连接请求实现的。
  • 处理数据：如果响应的数据是HTML文档，浏览器将进入页面渲染阶段。如果是二进制流（如图片、视频），则可能将其交由特定的处理程序进行处理。

九、页面渲染过程

浏览器接收到HTML响应后，开始进行页面渲染。此过程包括以下几个步骤：

  1. 解析HTML：浏览器解析HTML文档并构建DOM（文档对象模型）树。
  2. CSS解析：解析CSS文件并构建CSSOM（CSS对象模型）树。这包括处理样式、选择器，并确定具体规则的应用。
  3. 合成渲染树：将DOM树和CSSOM树合并，生成渲染树，这是最终决定如何在屏幕上呈现页面的结构。
  4. 布局计算：计算渲染树中每个节点的布局信息，包括元素的尺寸和位置。这个过程也称为回流（Reflow）。
  5. 绘制：根据渲染树中的信息，将可视内容绘制到屏幕上。此步骤称为绘制（Painting）。

复合图层合成

在绘制过程中，浏览器可能会将某些元素（如大图像、CSS动画或在更改时不会影响其他元素的元素）单独放置在合成图层中。这使得重绘和布局计算更加高效，因为在图层上的更改不会影响其他图层。

十、外链资源的处理

在HTML文档中，通常会引用外部资源（如JavaScript、图片、CSS文件等）。浏览器会根据这些引用发送额外的HTTP请求。并行加载资源可以提高页面加载速度。

  • JavaScript执行：当浏览器遇到JavaScript标签时，会阻塞后续的HTML解析，直到执行完成。这是由于JavaScript可能更改DOM结构。
  • 异步与延迟加载：使用async和defer属性可以改变JavaScript的加载和执行行为。

十一、事件与状态管理

在加载与解析完成后，会触发一系列事件，包括loaded和DOMContentLoaded。DOMContentLoaded事件在页面的初始HTML被完全加载和解析时触发，而不需要等待样式表、图像和子框架的加载完成，这使得开发者可以在数据准备好后执行JavaScript逻辑。

十二、浏览器缓存机制

浏览器在提高用户体验方面的重要机制之一是缓存。它能够显著减少网络请求，提升页面加载速度。主要的缓存机制包括：

  • HTTP缓存头：
    • Cache-Control：指示缓存的生存策略和条件。
    • Expires：过期时间，指示响应的有效期。
  • ETag：每次请求时返回的标识符，对于资源进行版本控制。
  • Last-Modified：表示资源的最后修改时间，浏览器可以使用此信息进行条件请求，节省流量。

十三、CSS的可视化格式模型

CSS的布局和样式渲染遵循一系列规则，包括以下概念：

  • 包含块：就是一个元素根据其父元素的布局来计算自身的正常流动位置。
  • 控制框（Box Model）：HTML元素的存在与表现形式，包括内容、内边距、边框和外边距。
  • BFC（块格式上下文）：对于某些元素，创建一个独立的包含区域，使其子元素的布局受其影响。
  • IFC（行内格式上下文）：控制行内元素的布局和占用空间的上下文。

十四、JavaScript引擎解析过程

JavaScript的执行过程一般包含几个主要阶段：

  1. 解析阶段：将源代码转换为可执行的代码，包括词法分析和语法分析。
  2. 预处理阶段：识别变量、函数声明并做一些初步准备。
  3. 执行阶段：创建执行上下文（Execution Context），并生成作用域链（Scope Chain）。
  4. 内存管理：JavaScript引擎通过垃圾回收机制管理内存，自动回收不再使用的对象。

作用域链与闭包

JavaScript的作用域链是决定变量访问权限的关键，闭包是指使得函数能记住其词法环境，从而可以访问外层函数的作用域。

avatar
文章
阅读
粉丝