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

2023-11-08 13:20

本文主要是介绍WEB渲染模式——CSR SSR SSG ISR DPR区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

页面渲染

浏览器渲染页面,根据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

这篇关于WEB渲染模式——CSR SSR SSG ISR DPR区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/370114

相关文章

2.1/5.1和7.1声道系统有什么区别? 音频声道的专业知识科普

《2.1/5.1和7.1声道系统有什么区别?音频声道的专业知识科普》当设置环绕声系统时,会遇到2.1、5.1、7.1、7.1.2、9.1等数字,当一遍又一遍地看到它们时,可能想知道它们是什... 想要把智能电视自带的音响升级成专业级的家庭影院系统吗?那么你将面临一个重要的选择——使用 2.1、5.1 还是

Python中@classmethod和@staticmethod的区别

《Python中@classmethod和@staticmethod的区别》本文主要介绍了Python中@classmethod和@staticmethod的区别,文中通过示例代码介绍的非常详细,对大... 目录1.@classmethod2.@staticmethod3.例子1.@classmethod

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

Golan中 new() 、 make() 和简短声明符的区别和使用

《Golan中new()、make()和简短声明符的区别和使用》Go语言中的new()、make()和简短声明符的区别和使用,new()用于分配内存并返回指针,make()用于初始化切片、映射... 详细介绍golang的new() 、 make() 和简短声明符的区别和使用。文章目录 `new()`

Python中json文件和jsonl文件的区别小结

《Python中json文件和jsonl文件的区别小结》本文主要介绍了JSON和JSONL两种文件格式的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下... 众所周知,jsON 文件是使用php JSON(JavaScripythonpt Object No

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

结构体和联合体的区别及说明

《结构体和联合体的区别及说明》文章主要介绍了C语言中的结构体和联合体,结构体是一种自定义的复合数据类型,可以包含多个成员,每个成员可以是不同的数据类型,联合体是一种特殊的数据结构,可以在内存中共享同一... 目录结构体和联合体的区别1. 结构体(Struct)2. 联合体(Union)3. 联合体与结构体的

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择

什么是 Ubuntu LTS?Ubuntu LTS和普通版本区别对比

《什么是UbuntuLTS?UbuntuLTS和普通版本区别对比》UbuntuLTS是Ubuntu操作系统的一个特殊版本,旨在提供更长时间的支持和稳定性,与常规的Ubuntu版本相比,LTS版... 如果你正打算安装 Ubuntu 系统,可能会被「LTS 版本」和「普通版本」给搞得一头雾水吧?尤其是对于刚入

python中json.dumps和json.dump区别

《python中json.dumps和json.dump区别》json.dumps将Python对象序列化为JSON字符串,json.dump直接将Python对象序列化写入文件,本文就来介绍一下两个... 目录1、json.dumps和json.dump的区别2、使用 json.dumps() 然后写入文