HTTP协议与浏览器工作机制-CSDN博客

一、HTTP协议概览

HTTP是用于在万维网(www.)上传输超媒体文件的应用层协议

2.响应部分：（服务器->客户端）

HTTP1.1：广泛使用，支持持久连接（多个请求可服用一个TCP连接）、管道化（可同时发送多个请求）等特性，提升传输速率，但存在队头阻塞等问题：一个连接中若前面的请求未完成，后面的请求需等待

HTTP2.0：基于二进制分帧，实现多路复用，多个请求和响应可在同一连接上并行传输，消除队头阻塞，还支持服务器推送等功能，大幅度提高性能。

需注意：百度主页使用的是HTTPS协议（https://www.baidu.com）

http协议与https协议区别：HTTP协议是明文传输，HTTPS是在HTTP的基础上加入了SSL/TLS加密层。

我们可以使用工具（curl或wget）来获取百度主页内容。

使用curl命令：curl https://www.baidu.com

结果：该命令会向百度服务器发送HTTPS请求，然后将服务器返回的百度主页HTML内容输出到终端

使用wget命令：wget -O baidu.html https://www.baidu.com

结果：会将百度主页内容下载到名为baidu.html的文件中，之后可通过cat baidu.html查看文件内容

浏览器本质上是一个能解析和渲染网页内容的客户端应用程序。

HTML文本是构建网页结构的基础，浏览器通过解析HTML文档，将其转换为可视化网页呈现给用户。

HTML文本呈现的核心方法包括：

HTML文档编写：开发者使用HTML标签（如<p>、<h1>、<div>）定义文本结构。例如，<p>Hello World</p>表示一个段落文本。HTML文档独立于操作系统，能在多种平台上运行1。
浏览器解析与渲染：浏览器（如Chrome、Firefox）加载HTML文件，并结合CSS（层叠样式表）和JavaScript处理文本样式和动态行为。CSS用于设置字体、颜色和布局，例如
```
font-size: 16px;定义文本大小。
```
JavaScript则处理交互逻辑，如动态更新文本内容。
工具辅助实现：对于特殊需求（如网页截图），工具如html2canvas通过模拟浏览器渲染引擎捕获文本呈现结果。其原理是遍历HTML元素的DOM结构并将其绘制到Canvas上。

HTML文本呈现的工作原理涉及浏览器引擎的多个阶段，主要包括：

HTML解析与DOM构建：浏览器逐行解析HTML代码，将每个HTML标签和内容解析为文档对象模型（DOM）中的节点，形成一颗DOM树。例如，一个文本节点<p>会成为DOM的一个叶子节点。DOM允许程序化访问和修改文本内容。
CSS样式应用与CSSOM构建：浏览器解析CSS规则，构建CSS对象模型（CSSOM）。
生成渲染树：将DOM树和CSSOM树结合，生成渲染树。（渲染树只包含需要显示的节点-隐藏的元素不会被包含，并且每个节点都带有对应的样式信息）例如，CSS规则决定文本的字体和颜色。
布局（Layout）阶段：浏览器计算渲染树中每个元素的位置和大小（称为“回流”）--布局计算。这个过程涉及几何计算，例如确定文本行的宽度和高度。布局优化是关键，以避免性能瓶颈。
绘制（Paint）阶段：渲染树被转换为屏幕上的像素。浏览器使用光栅化技术绘制文本和图像。例如，文本的锐利渲染依赖于反锯齿算法：

像素值=f(字体轮廓,分辨率)

这里，f 表示渲染函数，确保高清显示。
合成（Composition）：如果有多个图层（如文本覆盖图片），浏览器将它们合成为最终视图。现代浏览器使用GPU加速提升性能。（即按照布局结果，将节点绘制到屏幕上呈现完整网页）

浏览器使用网络进程处理所有网络请求，主要流程如下：

关键优化点：HTTP/2的服务端推送（Server Push）允许服务器主动发送页面关键资源

网络请求时间=DNS查询+TCP握手+SSL协商+请求传输+响应传输

核心组件是V8引擎的执行流程：

graph LR
A[源码] --> B(解析器生成AST)
B --> C[解释器Ignition生成字节码]
C --> D[编译器TurboFan优化机器码]

重要特性：当页面处于非激活状态时，大多数浏览器会降低定时器执行频率（如setInterval从100ms降为1s）

多进程架构的安全防护体系：

安全沙箱强度∝1进程间通信频率安全沙箱强度∝进程间通信频率1

浏览器存储体系分层结构：

graph TD

A[内存级] --> B(Session Storage)

A --> C(IndexedDB)

D[磁盘级] --> E(Local Storage)

D --> F(Cache API)

D --> G(Cookies)

存储类型
- 临时存储：sessionStorage (标签页级别)
- 持久存储：localStorage (域名级别)1
- 结构化存储：IndexedDB (大型数据)
```
// localStorage操作 
localStorage.setItem('theme', 'dark'); 
const userPref = localStorage.getItem('theme');
```
安全控制
- 同源策略隔离不同域名存储
- 敏感数据加密存储（如密码管理器）
- 用户可清除所有站点数据