WEB渲染模式——CSR SSR SSG ISR DPR区别

news2024/10/6 0:35:07

页面渲染

浏览器渲染页面,根据HTML文档类型声明(DOCTYPE)解析HTML和CSS,渲染步骤:解析、样式计算、元素布局、绘制、重绘重排。HTML、CSS、JavaScript是网页的三大核心技术。

HTML (Hyper Text Markup Language) 超文本标记语言。用标签描述网页结构和内容,可定义文本、图像、链接、表格、表单等网页元素的属性和布局。
DOM (Document Object Model) 文档对象模型。它将HTML文档解析为树状结构,HTML元素被表示为对象,DOM提供一组API,对象通过JavaScript进行访问和操作。
JS(JavaScript)网页开发的脚本语言。实现动态交互,用于验证用户输入、处理表单数据、创建动态效果、操作DOM元素等。
CSS(Cascading Style Sheets)级联样式表。描述网页样式和布局,为HTML元素设置各种样式,如颜色、字体、边距、背景等,以及位置和排列方式。

渲染方式

从页面展现角度,常见渲染方式有CSR SSR SSG ISR DPR,选择取决于项目的具体要求。

CSR(Client-Side Rendering,客户端渲染):页面渲染在客户端进行,单页应用程序SPA依赖客户端渲染,初始HTML被服务器返回到浏览器,然后浏览器使用JavaScript在客户端动态生成页面内容并进行渲染。CSR通常会导致较长的首次加载时间和较大的JavaScript文件。适合严重依赖用户交互的Web应用程序。

SSR(Server-Side Rendering,服务器端渲染):服务器在返回HTML之前,使用服务器端代码动态地生成完整的HTML页面。页面交互需要向服务器发送请求,可能会增加服务器的负载。适合内容驱动的网站。

SSG(Static Site Generation,静态站点生成):静态站点生成,也叫预渲染。网站页面在构建时被预渲染为静态HTML文件,并在每次请求之前都保持不变。页面的渲染是在构建过程中进行的,而不是在运行时动态生成的。由于页面是静态的,加载速度通常很快,不适合根据用户请求动态变化的情况。适合博客、文档网站和营销页面。

ISR(Incremental Static Regeneration,增量静态再生):是在SSG的基础上的改进,能够在页面被访问时进行部分更新,而不需要重新生成整个页面。服务器根据一定的逻辑重新生成部分页面内容,并将其返回给浏览器。网站可以在保持静态性能的同时,提供一定程度的动态内容。适合博客、新闻网站。

DPR(Distributed Page Rendering,分布式页面渲染):DPR是一种实验性的渲染方式,使用分布式计算资源来进行页面渲染。提高页面渲染的效率和吞吐量,尤其在高并发场景下具有良好的扩展性。

WEB渲染模式——CSR SSR SSG ISR DPR区别从页面展现角度,常见渲染方式有CSR SSR SSG ISR DPR,选择取决于项目的具体要求。icon-default.png?t=N7T8https://blog.oxings.com/article/98

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

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

相关文章

【沐风老师】3dMax快速平铺纹理插件QuickTiles教程

QuickTiles是3ds max的一个插件,允许您将常规瓷砖纹理转换为交互式纹理,就在mat.editor中。 换言之,您可以根据需要对任何纹理进行修改和重新创建:更改布局、瓷砖大小、格式、颜色、接缝、体积、随机化形状或纹理等等。 这种方法大…

eNsp下如何使用wireshark抓包

文章目录 拓扑图抓包操作 拓扑图 抓包操作 可以通过下图上的指示 来设置 Time列的显示样式。 这里有个缺点就是就是抓取ensp上的虚拟设备上的数据包时的,年月日时间显示的不对。暂时无解决办法。 一般选择 日期和时间(日期和时间与当前标准时间对应上时…

集简云平台助力无代码开发,实现平安银行与电商平台、CRM系统的快速连接

无代码开发与平安银行 平安银行是中国内地首家公开上市的全国性股份制银行,经过多年发展,已经在科技引领、综合金融、零售转型等领域形成独特竞争力和鲜明经营特色。近年来,平安银行更是积极拥抱科技,为此,选择了与集…

智慧工地源码 手册文档 app 数据大屏、硬件对接、萤石云

智慧工地解决方案依托计算机技术、物联网、云计算、大数据、人工智能、VR、AR等技术相结合,为工程项目管理提供先进技术手段,构建工地现场智能监控和控制体系,弥补传统方法在监管中的缺陷,最终实现项目对人、机、料、法、环的全方…

CROS错误 403 preflight 预检

预检 403 响应 Response for preflight 403 forbidden 如上图,配置了请求接口一直报错,前端看了没有什么问题,不知道哪里报错了,那么可能是后端没有设置跨域。(或者是设置了,但是可能需要换一种方式&#…

C语言每日一题(26)

力扣网 203. 移除链表元素 题目描述 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 思路分析 针对如图的普通情况,不能简单的遍历到对应位置然后进行释放,一方…

基于springboot实现致远汽车租赁平台管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现致远汽车租赁平台管理系统演示 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统…

bamboo is currently exporting

bamboo每天到11点会自动挂起执行export任务 构建任务会暂停影响研发发布版本 原因是bamboo设置了Scheduled backups 把时间改成凌晨的1点钟

SpringBoot不同环境加载不同配置文件(dev,sit,uat)

目录 一、springboot的profile配置profile多配置文件 二、maven的profiles策略 我们在使用spring的时候,一般都会有不同的环境需要部署:开发环境、测试环境和验收环境,而不同的环境则会有不同的配置,比如数据库ip。解决这个问题&a…

pyqt5的组合式部件制作(二)

接着做 3、为指示器设计合适的模型: 新建MyLamp.py,代码如下: from PyQt5.QtWidgets import QLabelclass MyLamp(QLabel):def __init__(self, parentNone):super().__init__(parent)self.rad Noneself.blink Falseself.normal_style No…

Vue2基础-Vue对象介绍

文章目录 一、概念特点举例 二、模板语法插值语法指令语法v-bind数据绑定 三、组件el和data的两种写法 四、MVVM模型五、数据代理六、事件处理基本使用事件修饰符键盘按键 七、计算属性八、监听属性普通监视深度监视监视简写 九、监听与计算总结 一、概念 一套用于构建用户界面…

iview实现table里面每行数据的跳转

我的需求是跳转到第三方网站&#xff0c;看官方是写了如何跳转站内路由&#xff0c;不符合我的要求&#xff0c;在csdn发现了一篇文章&#xff0c;我贴一下代码 <template><Table border :columns"ReportColumns" :data"ReportData"><templ…

利用Ansible实现批量Linux服务器安全配置

1.摘要 在上一篇<<初步利用Ansible实现批量服务器自动化管理>>文章中, 我初步实现了通过编写清单和剧本来实现多台服务器的自动化管理,在本章节中, 我将利用Ansible的剧本来实现更实用、更复杂一点的功能, 主要功能包括三个:1.同时在三台服务器中增加IP访问控制,只…

黑洞路由的几种应用场景

第一种在内网中产生环路&#xff1a; 这种核心交换机上肯定写一条默认路由 0.0.0.0 0 10.0.0.1 出口路由要写一条192.168.0.0 16 10.0.0.2 如果出口路由访问一条不存在的内网网段&#xff0c;又或者访问的那台终端停机了&#xff0c;那就会产生三层环路&#xff0c;数据包在…

Linux常用命令——cat命令

在线Linux命令查询工具 cat 连接文件并打印到标准输出设备上 补充说明 cat命令连接文件并打印到标准输出设备上&#xff0c;cat经常用来显示文件的内容&#xff0c;类似于下的type命令。 注意&#xff1a;当文件较大时&#xff0c;文本在屏幕上迅速闪过&#xff08;滚屏&am…

12 tcp协议详解

1、tcp的本性 tcp是一个悲观者&#xff0c;生下来就不信任网络&#xff0c;任务会发生丢包等&#xff0c;所以要从算法层面来保证可靠性。 2、TCP 包头格式 tcp的包头格式比UDP要复杂的多。 1.源端口号和目标端口号是不可少的&#xff0c;这一点和 UDP 是一样的。如果没有…

ICCV 2023|PViC:构建交互谓词视觉上下文,高效提升HOI Transformer检测性能

文章链接&#xff1a;https://arxiv.org/abs/2308.06202 代码仓库&#xff1a;https://github.com/fredzzhang/pvic 在今年的计算机视觉顶会上&#xff0c;基于视觉Transformer&#xff08;ViT&#xff09;的工作仍然占有非常重要的地位。目前最受研究者青睐的&#xff0c;莫过…

JVM Native内存泄露的排查分析(64M 问题)

我们有一个线上的项目&#xff0c;刚启动完就占用了使用 top 命令查看 RES 占用了超过 1.5G&#xff0c;这明显不合理&#xff0c;于是进行了一些分析找到了根本的原因&#xff0c;下面是完整的分析过程&#xff0c;希望对你有所帮助。 会涉及到下面这些内容 Linux 经典的 64M…

2023最新版Android逆向教程——第4天:真机环境的配置

目录 一、安卓逆向设备推荐二、真机环境配置(刷机基础教程)2.1 刷机方式的分类2.2 刷机包的分类2.3 谷歌手机工厂镜像2.4 简单配置2.5 进入 Bootloader 模式2.6 刷机详解 二、真机环境配置(root)三、真机环境配置(其他)3.1 调整时间3.2 关闭 wifi 信号上的3.3 停用设置向导 安卓…

HBase基础编程

文章目录 HBase基础编程一、实验目标二、实验要求及注意事项三、实验内容及步骤 附&#xff1a;系列文章 HBase基础编程 一、实验目标 掌握如何通过HBase shell命令来设计HBase表结构实例&#xff0c;从而理解HBase的列式存储结构掌 握 java编程创建HBase表和删除HBase表。 …