前后端数据交互流程

news2024/11/26 13:41:02

一、前言

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

二、原理

介绍前后端交互前先来了解一下浏览器的功能,浏览器通过渲染引擎和 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.coloradmin.cn/o/1897730.html

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

相关文章

东北财税之星:董女士的家乡创业记

乐财业智慧财税赋能平台,是一个帮助财税机构专业提升、业务增长,让财税生意更好做的综合赋能平台。聚焦财税公司业绩增长,预计2027年帮助2000家财税合伙人利润增长300%,致力打造轻量化、批量化、智能化的”业财税“一体财税服务生…

【C++航海王:追寻罗杰的编程之路】关联式容器的底层结构——AVL树

目录 1 -> 底层结构 2 -> AVL树 2.1 -> AVL树的概念 2.2 -> AVL树节点的定义 2.3 -> AVL树的插入 2.4 -> AVL树的旋转 2.5 -> AVL树的验证 2.6 -> AVL树的性能 1 -> 底层结构 在上文中对对map/multimap/set/multiset进行了简单的介绍&…

从CPU的视角看C++的构造函数和this指针

从汇编角度,清晰的去看构造函数和this指针到底是个什么东西呢?也许可以解决你的一点小疑问 首先写一个很简单的代码demo: class A{ public:int a;A(){;}void seta(int _a){a_a;}A* getA(){return this;} };int fun1(int px){return px; }in…

烟台LP-SCADA系统如何实现实时监控和过程控制?

关键字:LP-SCADA系统, 传感器可视化, 设备可视化, 独立SPC系统, 智能仪表系统,SPC可视化,独立SPC系统 LP-SCADA(监控控制与数据采集)系统实现实时监控和过程控制的主要原理和组件如下: 数据采集:LP-SCADA系统通过部署在现场的传…

跨境人最怕的封店要怎么规避?

跨境人最怕的是什么?——封店 造成封店的原因很多,IP关联、无版权售卖、虚假发货等等,其中IP关联这个问题导致店铺被封在跨境商家中简直是屡见不鲜 IP关联,是指被海外平台检测到多家店铺开设在同一个站点上的情况。我们知道有些…

用html+css设计一个列表清单小卡片

目录 简介: 效果图: 源代码: 可能的问题: 简介: 这个HTML代码片段是一个简单的列表清单设计。它包含一个卡片元素(class为"card"),内部包含一个无序列表(ul),列表项(li)前面有一个特殊的符号(△)。整个卡片元素设计成300px宽,150px高,具有圆角边…

Linux-C语言实现一个进度条小项目

如何在linux中用C语言写一个项目来实现进度条?(如下图所示) 我们知道\r是回车,\n是换行(且会刷新) 我们可以用 \r 将光标移回行首,重新打印一样格式的内容,覆盖旧的内容,…

lua入门(2) - 数据类型

前言 本文参考自: Lua 数据类型 | 菜鸟教程 (runoob.com) 希望详细了解的小伙伴还请查看上方链接: 八个基本类型 type - 函数查看数据类型: 测试程序: print(type("Hello world")) --> string print(type(10.4*3)) --> number print(t…

opencv概念以及安装方法

#opencv相关概念介绍 Open Source Computer Vision Library 缩写 opencv 翻译:开源的计算机视觉库 ,英特尔公司发起并开发,支持多种编程语言(如C、Python、Java等),支持计算机视觉和机器学习等众多算法&a…

ONNXRuntime与CUDA所对应的版本

官方链接: NVIDIA - CUDA | onnxruntime

公司管理系统

准备工作 上图mapper类型错了,不是class,是interface,修正过后的图片,如下所示 修正如下 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/webm spring.datasour…

学java的第3天 后端商城小程序工作

1.数据库的大坑 特殊字段名 ’我的图片表中有一个字段是描述我写成desc了,正好是mysql中的关键字 就不能使用了 2.后端编写 2.1可以把请求分开 在商品浏览页中 只显示商品的大致信息 当用户再点击其他按钮时在发出请求 2.2把请求合并 把数据整合到一起 利用ass…

关于ORACLE单例数据库中的logfile的切换、删除以及添加

一、有关logfile的状态解释 UNUSED: 尚未记录change的空白group(一般会出现在loggroup刚刚被添加,或者刚刚使用了reset logs打开数据库,或者使用clear logfile后) CURRENT: 当前正在被LGWR使用的gro…

神领物流项目第一天

文章目录 聚焦快递领域首先第一个是验证码模块流程登录接口权限管家 聚焦快递领域 首先第一个是验证码模块流程 首先生成验证码的流程 可以使用工具类去生成验证码 LineCaptcha lineCaptcha CaptchaUtil.createLineCaptcha(160, 60, 4, 26);// 获取值然后存入redis中 strin…

重大更新来袭!!《植物大战僵尸杂交版V2.1+修改器+融合版》

大家好!每个软件更新总是令人兴奋不已。前段时间介绍的《植物大战僵尸》系列以其独特的策略玩法和丰富的植物角色,赢得了很多玩家的喜爱。而在今天,这款经典游戏全网最新版本——《植物大战僵尸:杂交版V2.1》正式推出,…

SpringBoot实战:轻松实现XSS攻击防御(注解和过滤器)

文章目录 引言一、XSS攻击概述1.1 XSS攻击的定义1.2 XSS攻击的类型1.3 XSS攻击的攻击原理及示例 二、Spring Boot中的XSS防御手段2.1 使用注解进行XSS防御2.1.1 引入相关依赖2.1.2 使用XSS注解进行参数校验2.1.3 实现自定义注解处理器2.1.4 使用注解 2.2 使用过滤器进行XSS防御…

Chiasmodon:一款针对域名安全的公开资源情报OSINT工具

关于Chiasmodon Chiasmodon是一款针对域名安全的公开资源情报OSINT工具,该工具可以帮助广大研究人员从各种来源收集目标域名的相关信息,并根据域名、Google Play应用程序、电子邮件地址、IP地址、组织和URL等信息进行有针对性的数据收集。 该工具可以提…

MUNIK解读ISO26262--系统架构

功能安全之系统阶段-系统架构 我们来浅析下功能安全系统阶段重要话题——“系统架构” 目录概览: 系统架构的作用系统架构类型系统架构层级的相关安全机制梳理 1.系统架构的作用 架构的思维包括抽象思维、分层思维、结构化思维和演化思维。通过将复杂系统分解…

JVM专题之性能优化

运行时优化 方法内联 > 方法内联,是指 **JVM在运行时将调用次数达到一定阈值的方法调用替换为方法体本身** ,从而消除调用成本,并为接下来进一步的代码性能优化提供基础,是JVM的一个重要优化手段之一。 > > **注:** > > * **C++的inline属于编译后内联,…

CompletableFuture工具类使用

CompletableFuture工具类可以帮助实现Java并发编程中的任务编排 以上除了join用于阻塞调用该发放的线程并且接受CompletableFuture的返回值以外其它方法皆有Async异步和Executor指定线程池选项 对于supply,run,apply,accept的区别在于函数式编程的接口类型不同: supply: Sup…