一、前言
用户在浏览器访问一个网站时,会有前后端数据交互的过程,前后端数据交互也有几种的情况,一下就简单的来说明一下
二、原理
介绍前后端交互前先来了解一下浏览器的功能,浏览器通过渲染引擎和 JavaScript 引擎协同工作,完成从加载 HTML/CSS/JavaScript 资源到解析、布局和绘制页面的全过程
渲染引擎的细节
染引擎从网络层接收到 HTML 文档后,会执行以下步骤
解析 HTML:将 HTML 标记解析为 DOM 节点,构建 DOM 树
处理 CSS:解析外部和内部的 CSS 资源,生成 CSSOM 树
处理 JavaScript:如果遇到 JavaScript 代码,会交给 JavaScript 引擎执行。JavaScript 可能会操作 DOM 和 CSSOM。
构建渲染树:结合 DOM 树和 CSSOM 树,生成渲染树。渲染树只包含可见元素
布局(回流):计算每个元素的位置和大小,生成布局树
绘制:将布局树中的每个节点绘制到屏幕上,使用多个绘制步骤和图层
JavaScript 引擎的细节
JavaScript 引擎负责解析和执行 JavaScript 代码,通常分为以下几个步骤
解析:将源代码解析为抽象语法树(AST)
编译:将 AST 编译为字节码
优化:进行即时编译(JIT),将热代码编译为机器码,以提高执行效率
执行:执行字节码和机器码,进行垃圾回收,管理内存
浏览器的工作流程
输入 URL:用户在地址栏输入 URL 并按下回车键
DNS 解析:浏览器通过 DNS 解析获取 URL 对应的 IP 地址
发送请求:浏览器向服务器发送 HTTP/HTTPS 请求
服务器响应:服务器返回 HTML 文档
解析 HTML:渲染引擎解析 HTML 文档,构建 DOM 树
解析 CSS:渲染引擎解析 CSS,构建 CSSOM 树
构建渲染树:将 DOM 树和 CSSOM 树结合,生成渲染树
布局:计算渲染树中各元素的位置和大小
绘制:将渲染树中的元素绘制到屏幕上
执行 JavaScript:JavaScript 引擎解析并执行嵌入在 HTML 中的 JavaScript 代码。JavaScript 代码可能会操作 DOM,导致重新布局和重绘
下面就来介绍一下前后端交换的两种情况,一种是在当前页面调用后端接口查询数据,通过浏览器在当前页面中渲染出来,另一种是调用后端接口查询数据后跳转另一个页面,然后再通过浏览器在跳转后的页面中渲染出来
不跳转页面的情况下
1.用户通过域名请求前端服务
2.前端服务通过反向代理将前端数据返回到浏览器
3.浏览器通过渲染引擎将页面渲染展示给用户
4.用户在页面中执行某操作调用后端接口
5.浏览器通过js引擎执行调用后端接口操作
6.后端服务将执行结果通过ingress代理返回给浏览器
7.JavaScript 操作 DOM 和 CSSOM重新渲染页面
跳转页面的情况下
1.用户通过域名请求前端服务
2.前端服务通过反向代理将前端数据返回到浏览器
3.浏览器通过渲染引擎将页面渲染展示给用户
4.用户在页面中执行某操作调用后端接口
5.浏览器通过js引擎执行调用后端接口操作
6.后端服务将执行结果通过ingress代理返回给浏览器
7.JavaScript通过返回结果判断跳转页面并存储返回的数据
8.通过域名请求前端服务
9.前端服务通过反向代理将前端数据返回到浏览器
10.浏览器通过渲染引擎使用js引擎获得的数据将页面渲染展示给用户