前后端数据交互流程

一、前言

    用户在浏览器访问一个网站时,会有前后端数据交互的过程,前后端数据交互也有几种的情况,一下就简单的来说明一下

二、原理

介绍前后端交互前先来了解一下浏览器的功能,浏览器通过渲染引擎和 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引擎获得的数据将页面渲染展示给用户

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/864700.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 判断两个日期 相差几天

// 入参 为 Date 例如 :Date1 datenew Date();long dayCount (date1.getTime() - date1.getTime()) / 86400000;

消息中间件常用命令

一、Nginx篇 1.1 启动Nginx start nginx 1.2 停止Nginx nginx.exe -s stop 1.3 清理缓存 nginx.exe -s reload 1.4 重新打开日志文件 nginx.exe -s reopen 1.5 查看Nginx版本 nginx -v 1.6 彻底停用Nginx taskkill /f /t /im nginx.exe

简明万年历编制(C语言)

简明万年历编制(C语言 ) 编制万年历的要素: 农历公历对照,显示星期,农历干支年,当年生肖,国定节假日,寒天九九,暑日三伏,入梅出梅,节气时间&#…

回调函数在异步编程中的作用与实现方式

回调函数在异步编程中的作用与实现方式 大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在计算机编程中,回调函数是指通过将函数作为参数传递给其他函数,使得该函数在特定事件…

使用 HTTPS 已成为网站的标配了

网站使用HTTPS的原因 背景:十年前,HTTPS并不普遍,但随着网络安全意识的提高,现在已成为网站标配。 网站升级到HTTPS的动机 安全问题:HTTP缺乏安全机制,易被窃取和篡改数据。例如,电信运营商劫…

剑神诀_单机架设_无需虚拟机_小白专用

前言 今天给大家带来一款单机游戏的架设:剑神诀,一键端 无需虚拟机 如今市面上的资源参差不齐,大部分的都不能运行,本人亲自测试,运行视频如下: 剑神诀 搭建教程 此游戏架设不需要安装虚拟机,…

单模光纤(SMF)市场规模不断增长 非色散位移单模光纤为其代表产品

单模光纤(SMF)市场规模不断增长 非色散位移单模光纤为其代表产品 单模光纤(SMF)指芯径为8-10微米,用于单一传输模式的光纤。单模光纤具有频带宽、芯径细、适合长距离传输、传输耗损低、抗干扰能力强、传输速度快等优势…

【java12】java12新特性之switch表达式

Java12引入了对switch语句的增强,允许在switch语句中使用表达式来代替传统的语句列表。这样可以使得代码更加简洁和易读。 switch表达式也是作为预览语言功能的第一个语言改动被引入新版Java中来的,这是一种引入新特性的测试版的方法。通过这种方式&…

MySQL实训项目——餐饮点餐系统

项目简介:餐饮点餐系统是一款为餐厅和顾客提供便捷点餐服务的在线平台。通过该系统,餐厅能够展示其菜单,顾客可以浏览菜品,并将其加入购物车或直接下单。系统还提供了订单管理功能,方便餐厅跟踪和处理顾客的订单。 1. …

IT启航:高考后的IT学习之旅与未来规划

随着高考分数的揭晓,你们即将迎来人生新的篇章。对于有志于踏入IT领域的你们来说,这个假期是开启探索之旅的绝佳时机。作为一位已经在社会大学摸爬滚打多年的牛马来说,我想从自己的经历和观察出发,给你们提供一些实质性的建议和学…

LangChain+ChatGLM基本原理及私有化部署

一、LangChain 1.作用:用于提升大型语言模型(LLMs)功能的框架,能够让大型语言模型结合外部的计算和数据源,并根据信息执行指定操作。 结合LLM大模型外部数据等,外部工具及数据等实现特定文档问答、聊天机器…

【计算机网络】传输层(作业)

1、OSI参考模型中,提供端到端的透明数据传输服务、差错控制和流量控制的层是(C)。 A. 物理层B. 网络层C. 运输层D. 会话层 2、运输层为(B)之间提供逻辑通信。 A. 主机B. 进程C. 路由器D. 操作系统 3、运输层面向连接…

开发个人OpenUI--2 环境搭建

开发个人OpenUI–2 环境搭建 2.1 环境要求 Golang 1.22 Etcd Docker Redis Mysql 2.2Docker本地开发环境搭建 这里使用 Docker Compose 来编排管理我们的容器,docker-compose.yaml: version: 3.8services:mysql:image: mysql:8.0.18container_n…

RT-Thread Studio与CubeMX联合编程之rtthread stm32h743的使用(十一)spi设备SFUD驱动的使用

我们要在rtthread studio 开发环境中建立stm32h743xih6芯片的工程。我们使用一块stm32h743及fpga的核心板完成相关实验,核心板如图: 1.建立新工程,选择相应的芯片型号及debug引脚及调试器 2.编译下载,可以看到串口打印正常 3.…

Hubstudio指纹浏览器:海外代理IP新选择,IPXProxy为何备受推崇?

许多人都会把Hubstudio指纹浏览器和代理IP进行搭配使用,为了保证网络操作的顺利进行,例如亚马逊的多账号管理。那有没有好用的海外代理IP呢,如何在Hubstudio指纹浏览器中使用代理IP呢? 下面就给大家推荐好用的一家海外IP代理&…

积鼎CFD:基于Virtualflow在溃坝洪水演进数值仿真分析

近期,多地遭受了前所未有的洪水侵袭,每一次灾害都如同警钟长鸣,提醒我们水库大坝安全的重要性,超标准暴雨的突袭让大坝的安全防线面临前所未有的考验。面对这一挑战,CFD技术可为溃坝洪水的预测与管理开辟新的路径。凭借…

cesium 实现三维无人机航拍过程实景效果

需求背景 需要实现一个动态的三维无人机航拍过程实景效果 代码开发中&#xff0c;迭代功能待续... 解决效果 cesium 实现三维无人机航拍过程实景效果 index.vue <template><div><el-button class"btn" click"start">开始</el-butt…

vue根据文字长短展示跑马灯效果

介绍 为大家介绍一个我编写的vue组件 auto-marquee &#xff0c;他可以根据要展示文本是否超出展示区域&#xff0c;来判断是否使用跑马灯效果&#xff0c;效果图如下所示 假设要展示区域的宽度为500px&#xff0c;当要展示文本的长度小于500px时&#xff0c;只会展示文本&…

如何借助物联网实现农情监测与预警

如何借助物联网实现农情监测与预警&#xff1f; 物联网技术&#xff0c;作为信息技术与传统行业的深度融合产物&#xff0c;正逐步变革着农业生产的管理模式&#xff0c;特别是在农情监测与预警领域展现出巨大潜力。其核心在于通过感知层的各类传感器、通信层的数据传输技术以…