前后端数据交互流程

一、前言

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

二、原理

介绍前后端交互前先来了解一下浏览器的功能,浏览器通过渲染引擎和 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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

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

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技术可为溃坝洪水的预测与管理开辟新的路径。凭借…

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

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

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

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

高编:线程

一、pthread 线程 优点: 比多进程节省资源,可以共享变量。 概念: 线程是轻量级进程,一般是一个进程中的多个任务。进程是系统中最小的资源分配单位.线程是系统中最小的执行单位 特征: 1、共享资源 2、效率高 …

qt可点击的QLabel

需求——问题与思路 使用wpf实现一个可点击的超链接label相当简单(如下图),但是qt的QLabel不会响应点击事件,那就从QLabel继承一个类,然后在该类中重写mousePressEvent函数,并在该函数中对左键点击事件做响…

应对SQL注入攻击:保障网站安全的策略

在互联网的广阔天地中,网站安全始终是站长用户和企业开发者不可忽视的重要议题。其中,SQL注入攻击作为一种常见的网络攻击手段,严重威胁着网站的数据安全和业务稳定。什么是SQL注入攻击,我们该如何应对这种攻击呢?今天…

成都欣丰洪泰文化传媒有限公司电商服务的新星力量

在当今这个数字化飞速发展的时代,电商行业如日中天,成为拉动经济增长的新引擎。在这股浪潮中,一家名为成都欣丰洪泰文化传媒有限公司的企业,凭借其专业的电商服务能力和创新的营销策略,成为了众多品牌背后的强大推手。…

怎么保护CAD图纸丨CAD图纸防泄密方法推荐

怎么保护CAD图纸丨CAD图纸防泄密方法推荐 在现代工程设计和建筑行业中,CAD图纸承载着项目的核心信息,是极其重要的知识产权。一旦CAD图纸被盗或泄露,不仅可能导致商业机密的丧失,还可能给公司带来重大经济损失,甚至面…

AI新功能发布:AI生成数据库和AI规划任务,CoCodeAI再添新成员!

Hi,大家好,好久不见! 我是CoCodeAI智能助手CoCo。 CoCodeAI智能助手CoCo 我无比荣幸地为大家揭晓 CoCode开发云的璀璨新星: AI生成数据库AI规划任务。 近日,CoCode开发云旗下Co-Project V3.8智能项目管理平台重磅发…

MySQL数据库中文乱码处理

出现中文乱码之后处理方式 1、执行下面语句查看一下关于编码方式 show variables like %char%结果展示:【你应该和我的不一样】 2、如果你的和我查询结果不一致请设置成一致语句,根据自己需要复制语句 如下:【除了最后一条记录哈】 SET G…

2024 年江西省研究生数学建模竞赛A题:交通信号灯管理问题分析、实现代码及参考论文

2024 年江西省研究生数学建模竞赛题目交通信号灯管理 1 题目 交通信号灯是指挥车辆通行的重要标志,由红灯、绿灯、 黄灯组成。红灯停、绿灯行,而黄灯则起到警示作用。交通 信号灯分为机动车信号灯、非机动车信号灯、人行横道信号 灯、方向指示灯等。 一…

文件扫描件怎么弄?文件扫描就用这5个方法

在快节奏的现代生活中,我们经常需要处理大量纸质文件,因为它们不仅占用空间,还可能因时间的流逝而损坏或丢失。 幸运的是,有了文件扫描软件手机版,我们可以将这些文件轻松转换为PDF格式,既保留了原始布局&…