公司网站百度排名没有了,服务商是什么意思,阳泉做网站多少钱,做网站jijianjianzhan一、前言 用户在浏览器访问一个网站时#xff0c;会有前后端数据交互的过程#xff0c;前后端数据交互也有几种的情况#xff0c;一下就简单的来说明一下
二、原理
介绍前后端交互前先来了解一下浏览器的功能#xff0c;浏览器通过渲染引擎和 JavaScript 引擎协同工作会有前后端数据交互的过程前后端数据交互也有几种的情况一下就简单的来说明一下
二、原理
介绍前后端交互前先来了解一下浏览器的功能浏览器通过渲染引擎和 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 树结合生成渲染树
布局计算渲染树中各元素的位置和大小
绘制将渲染树中的元素绘制到屏幕上
执行 JavaScriptJavaScript 引擎解析并执行嵌入在 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引擎获得的数据将页面渲染展示给用户
