浏览器与服务器的交互

浏览器地址栏输入URL（网址​​）

​​​​(1) 服务器进行URL解析​​：验证URL格式，提取协议、域名等

​​​​(2) 服务器进行DNS查询​​：将域名转换为IP地址（可能涉及缓存或DNS预取）

​​​​(3) 与服务器建立连接​​：通过TCP三次握手（HTTPS还需TLS协商）

​​​​(4) 浏览器发送请求​​：浏览器构造HTTP请求头（含Cookie、User-Agent等）。请求方法：GET（获取资源）、POST（提交数据）、PUT/DELETE（RESTful API）

服务器处理请求

服务器返回资源

静态资源 vs 动态资源​​

• ​​静态资源​​（如HTML/CSS/JS文件）：服务器直接读取文件，返回 200 OK 和内容。
• ​​动态资源​​（如PHP/Python接口）：通过后端程序（如Django、Node.js）处理，可能查询数据库后生成响应。

服务器响应报文：状态码、缓存控制、html文件

浏览器渲染阶段​​

​​(1) 解析响应​​

• ​​Content-Type处理​​：
• text/html：触发HTML解析。
• application/json：交由JavaScript处理（如 fetch().then()）。
• image/png：解码为位图并显示。

​​(2) 构建DOM/CSSOM​​

​​HTML解析​​：

• 边下载边解析，遇到 <script> 默认阻塞（除非标记 async/defer）。
• 容错机制：自动补全缺失标签（如 <p> 未闭合）。

​​CSS解析​​：

• 生成CSSOM树，选择器从右向左匹配（如 .box a 先找所有 <a> 再过滤）。

​​(3) 渲染管线（Rendering Pipeline）​​

• ​​布局（Layout）​​：计算每个节点的几何属性（盒模型、浮动）。
• ​​绘制（Paint）​​：将布局转换为像素（如文本、边框）。
• ​​合成（Composite）​​：分层渲染（如 transform: translateZ(0) 触发GPU加速）。

后续交互（AJAX/WebSocket）​​

​​(1) AJAX（异步通信）​​

• 基于XMLHttpRequest或Fetch API，不刷新页面更新数据。

​​(2) WebSocket（全双工通信）​​

• ​​握手阶段​​：HTTP Upgrade头切换协议。
• ​​持续通信​​：建立后通过帧（Frame）双向传输数据（如聊天室、实时游戏）。