网页资源加载过程
网页资源加载是指在浏览器中访问一个网页时，浏览器如何获取和显示网页内容的过程。这个过程通常分为以下几个步骤：
-
DNS 解析： 当用户在浏览器中输入一个网址（例如，https://www.example.com），浏览器首先需要将域名解析为对应的 IP 地址。它会向本地 DNS 缓存或 DNS 服务器发起 DNS 查询请求，以获取域名对应的 IP 地址。
-
建立 TCP 连接： 一旦浏览器知道了服务器的 IP 地址，它会尝试与服务器建立 TCP 连接。这个过程通常是一个三次握手的过程，确保客户端和服务器之间的通信通道是可靠的。
-
发起 HTTP 请求： 一旦建立了 TCP 连接，浏览器会发送 HTTP 请求到服务器，请求网页的各种资源，如 HTML、CSS、JavaScript 文件、图像等。这些资源可以是同一台服务器上的，也可以是其他服务器上的，浏览器会根据 URL 中的信息来确定资源的来源。
-
服务器处理请求： 服务器收到浏览器的请求后，会根据请求的内容来处理。这可能涉及到动态生成的内容，例如从数据库中获取数据并将其嵌入 HTML 中。
-
返回 HTTP 响应： 服务器会生成一个 HTTP 响应，其中包含请求资源的内容以及相关的元数据，如响应状态码、响应头部信息等。然后，服务器通过建立的 TCP 连接将响应发送回浏览器。
-
接收和渲染内容： 浏览器接收到服务器的响应后，会解析响应内容。如果响应是 HTML 页面，浏览器会解析 HTML 结构并构建文档对象模型（DOM）。接着，它会获取页面中引用的其他资源，如 CSS 文件和 JavaScript 文件，并开始下载它们。
-
并行加载资源： 现代浏览器通常支持并行加载资源，这意味着它们可以同时下载多个资源，而不必等待一个资源下载完成才开始下一个。
-
执行 JavaScript： 如果页面包含 JavaScript 代码，浏览器会执行这些代码。JavaScript 可以修改页面的结构和行为。
-
渲染页面： 浏览器会将页面内容渲染到屏幕上，将DOM和CSSOM结合起来生成渲染树，然后将其呈现到用户屏幕上。这个过程包括布局（计算元素的位置和大小）和绘制（将元素绘制到屏幕上）。
-
用户交互： 用户可以与加载完毕的网页进行交互，如点击链接、填写表单、滚动页面等。
-
资源缓存： 浏览器会缓存已加载的资源，以便下次访问相同页面时可以加快加载速度。这可以减少对服务器的请求。
-
断开连接： 当页面加载完毕或用户关闭浏览器时，浏览器会关闭与服务器的连接。
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}`);
});