前后端数据交互流程

一、前言

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

二、原理

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uboot ethernet初始化

在Board_r.c 使用initr_net,先初始化phy,然后初始化gmac,driver/net/gmacv300/gmac.c实现管脚复用和gmac设备注册 Board_r.c #ifdef CONFIG_CMD_NETstatic int initr_net(void){puts("Net: ");eth_initialize();#if defined(CONFIG_RESET_PHY_R)debug("Reset…

计算机视觉 图像融合技术概览

在许多计算机视觉应用中(例如机器人运动和医学成像),需要将来自多幅图像的相关信息集成到一幅图像中。这种图像融合将提供更高的可靠性、准确性和数据质量。 多视图融合可以提高图像的分辨率,同时恢复场景的 3D 表示。多模态融合结合了来自不同传感器的图像,称为多传感器融…

短视频文案提取神器怎么提取抖音视频文案!

很多编导以及视频内容创作者为了提高自己的工作效率还会使用视频转文字提取神器,我们都清楚短视频领域每个平台人群熟悉都有所不同,在分发内容的时候也会调整内容已符合平台属性。 短视频文案提取神器怎么提取抖音视频文案 短视频常见的平台有抖音、西瓜…

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防御…

现在这个行情怎么理解股票期权?一个守住底线的工具!

今天带你了解现在这个行情怎么理解股票期权?一个守住底线的工具!股票期权是一种金融衍生品,给予持有者在未来特定时间以特定价格购买或出售股票的权利。 行情看down可以买入看跌期权,看跌期权的买方是因为预计行情的价格会在近期…

imx6ull/linux应用编程学习(11)CAN应用编程基础

关于裸机的can通信,会在其他文章发,这里主要讲讲linux上的can通信。 与I2C,SPI等同步通讯方式不同,CAN通讯是异步通讯,也就是没有时钟信号线来保持信号接收同步,也就是所说的半双工,无法同时发送与接收&…

【python】PyQt5控件尺寸大小位置,内容边距等API调用方法实战解析

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

小(微)间距P1.538COB渠道现货销售将加速全面升级替换SMD产品。

COB(Chip on Board)技术,如一颗璀璨的星辰,在上世纪60年代的科技夜空中悄然升起。它巧妙地将LED芯片镶嵌在PCB电路板的怀抱中,再用特种树脂为其披上一层坚韧的外衣,宛如一位精心雕琢的艺术家在创作一幅完美…

【Python机器学习】处理文本数据——用tf-idf缩放数据

为了按照我们预计的特征信息量大小来缩放特征,而不是舍弃那些认为不重要的特征,最常见的一种做法就是使用词频-逆向文档频率(tf-idf)。这一方法对某个特定文档中经常出现的术语给与很高的权重,但是堆在语料库的许多文档…

【UE5.1】Chaos物理系统基础——04 事件驱动粒子效果

目录 效果 步骤 一、炸开时的烟雾效果 二、炸开时的碎片效果 效果 步骤 一、炸开时的烟雾效果 1. 选中场景中的几何体集,勾选“通知中断”,这样当几何体集解体时就能产生一个事件;勾选“通知碰撞”,当几何体集检测到碰撞也能…

Java+前后端分离架构+ MySQL8.0.36产科信息管理系统 产科电子病历系统源码

Java前后端分离架构 MySQL8.0.36产科信息管理系统 产科电子病历系统源码 产科信息管理系统—住院管理 数字化产科住院管理是现代医院管理中的重要组成部分,它利用数字化技术优化住院流程,提升医疗服务质量和效率。以下是对数字化产科住院管理的详细阐述…

华火电燃喷火单灶再荣获中国质量认证中心 CQC 权威证书,引领行业新高度

近日,华火传来了一则令整个行业瞩目的重大喜讯:其电燃喷火单灶“再度”成功荣获中国质量认证中心(CQC)权威证书。这一里重大程碑式的成就,不仅是对华火产品卓越品质的高度认可,更是华火在品牌发展道路上的一…

网安小贴士(8)IPv4与IPv6

一、前言 IPv4和IPv6都是互联网协议(IP)的版本,它们用于在互联网上标识和定位设备。 二、定义 IPv4(互联网协议第四版): IPv4是互联网协议的第一个广泛使用的版本,最初在1981年被标准化为RFC 7…

单位立方体各个面上的法向量,向量场以及每个面上的通量

单位立方体各个面上的法向量,向量场 F ( x , y , z ) \mathbf{F} (x, y, z) F(x,y,z) 以及每个面上的通量 flyfish 假设我们有一个单位立方体,向量场 F ( x , y , z ) \mathbf{F} (x, y, z) F(x,y,z) 在该立方体上。 法向量 :单位立方…

中霖教育:二建报名成功后怎么审核?

【中霖教育怎么样】【中霖教育靠谱吗】 在成功完成二级建造师资格考试的报名流程后,需要准备后续的审核阶段,审核是否通过关乎考生是否能顺利参加考试,审核的方式包括:现场审核、网络审核以及考试后的审核。 某些地区会要求考生…

空间数据获取与预处理指南:生产与科研应用

1.空间数据简介 2.免费的国外GIS数据下载方法 3.免费的国内GIS数据下载方法 4.遥感云平台数据的获取方法 5.专题数据的获取及预处理示例 (1)行政区划数据 (2)气象数据 (3)土壤数据 (4)遥感产品数据 (5)统计数据 (6)…… 原文链接https://mp.weixin.qq.com/s?__bizMz…

实验三 图像增强—灰度变换

一、实验目的: 1、了解图像增强的目的及意义,加深对图像增强的感性认识,巩固所学理论知识。 2、学会对图像直方图的分析。 3、掌握直接灰度变换的图像增强方法。 二、实验原理及知识点 术语‘空间域’指的是图像平面本身,在空…

【MySQL系列】隐式转换

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

构建Android studio版的CarSystemUI工程时因为包名一致导致BuildConfig问题

项目场景: 公司计划开发杰发AC8025-Android 12版本车载平台,前期预研需要构建Android studio版的CarSystemUI工程 问题描述 AAOS车载项目里面的CarSystemUI源码默认无Android studio版本,为了后期快速开发调试需要构建Android studio能直接…

python多线程与多进程开发实践及填坑记(1)

1. 需求分析 1.1. 概述 基于Flask、Pika、Multiprocessing、Thread搭建一个架构,完成多线程、多进程工作。具体需求如下: 并行计算任务:使用multiprocessing模块实现并行计算任务,提高计算效率、计算能力。消息侦听任务&#x…