网页资源加载过程

网页资源加载是指在浏览器中访问一个网页时，浏览器如何获取和显示网页内容的过程。这个过程通常分为以下几个步骤：

1. DNS 解析： 当用户在浏览器中输入一个网址（例如，https://www.example.com），浏览器首先需要将域名解析为对应的 IP 地址。它会向本地 DNS 缓存或 DNS 服务器发起 DNS 查询请求，以获取域名对应的 IP 地址。

2. 建立 TCP 连接： 一旦浏览器知道了服务器的 IP 地址，它会尝试与服务器建立 TCP 连接。这个过程通常是一个三次握手的过程，确保客户端和服务器之间的通信通道是可靠的。

3. 发起 HTTP 请求： 一旦建立了 TCP 连接，浏览器会发送 HTTP 请求到服务器，请求网页的各种资源，如 HTML、CSS、JavaScript 文件、图像等。这些资源可以是同一台服务器上的，也可以是其他服务器上的，浏览器会根据 URL 中的信息来确定资源的来源。

4. 服务器处理请求： 服务器收到浏览器的请求后，会根据请求的内容来处理。这可能涉及到动态生成的内容，例如从数据库中获取数据并将其嵌入 HTML 中。

5. 返回 HTTP 响应： 服务器会生成一个 HTTP 响应，其中包含请求资源的内容以及相关的元数据，如响应状态码、响应头部信息等。然后，服务器通过建立的 TCP 连接将响应发送回浏览器。

6. 接收和渲染内容： 浏览器接收到服务器的响应后，会解析响应内容。如果响应是 HTML 页面，浏览器会解析 HTML 结构并构建文档对象模型（DOM）。接着，它会获取页面中引用的其他资源，如 CSS 文件和 JavaScript 文件，并开始下载它们。

7. 并行加载资源： 现代浏览器通常支持并行加载资源，这意味着它们可以同时下载多个资源，而不必等待一个资源下载完成才开始下一个。

8. 执行 JavaScript： 如果页面包含 JavaScript 代码，浏览器会执行这些代码。JavaScript 可以修改页面的结构和行为。

9. 渲染页面： 浏览器会将页面内容渲染到屏幕上，将DOM和CSSOM结合起来生成渲染树，然后将其呈现到用户屏幕上。这个过程包括布局（计算元素的位置和大小）和绘制（将元素绘制到屏幕上）。

10. 用户交互： 用户可以与加载完毕的网页进行交互，如点击链接、填写表单、滚动页面等。

11. 资源缓存： 浏览器会缓存已加载的资源，以便下次访问相同页面时可以加快加载速度。这可以减少对服务器的请求。

12. 断开连接： 当页面加载完毕或用户关闭浏览器时，浏览器会关闭与服务器的连接。

HTTP协议获取路径与查询字符串

在 HTTP 协议中，请求的路径和查询字符串通常包含在请求的 URL 中。你可以使用 Node.js 的 http 模块或 Express 框架来获取路径和查询字符串的内容。

使用 http 模块获取路径和查询字符串

以下是使用 http 模块的示例来获取路径和查询字符串的内容：

const http = require('http');
const url = require('url');const server = http.createServer((req, res) => {// 使用 url 模块解析请求的 URLconst parsedUrl = url.parse(req.url, true);// 获取路径const path = parsedUrl.pathname;// 获取查询字符串参数const query = parsedUrl.query;console.log('Path:', path);console.log('Query String:', query);res.setHeader('Content-Type', 'text/plain');res.end('Received request with path and query string.');
});const port = 3000;
server.listen(port, () => {console.log(`Server is running on port ${port}`);
});

 

在这个示例中，我们使用了 Node.js 的 url 模块来解析请求的 URL。parsedUrl.pathname 用于获取路径部分，而 parsedUrl.query 用于获取查询字符串参数。

使用 Express 框架获取路径和查询字符串

如果你使用 Express 框架，获取路径和查询字符串更加简单。以下是一个使用 Express 的示例：

const express = require('express');
const app = express();app.get('/example', (req, res) => {// 获取路径const path = req.path;// 获取查询字符串参数const query = req.query;console.log('Path:', path);console.log('Query String:', query);res.send('Received request with path and query string.');
});const port = 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});