客户端渲染和服务端渲染的区别

一、客户端渲染

页面的渲染工作都是由浏览器来完成的,服务器只是负责提供数据。前端去后端取数据生成DOM树。

**最少两次请求 **

  • 第一次请求拿到的是页面
  • 第二次请求拿到的是动态数据

 

二、服务端渲染

页面渲染的工作都是由服务端来完成的,数据也是由服务端提供的,浏览器只负责展示页面内容。也就是DOM树在服务端生成,然后返回给前端。

只有一次请求,相应的就是最终结果,客户端不需要再做任何处理

 三、服务端渲染和客户端渲染的区别

  • 服务端渲染是在服务端生成DOM树,客户端渲染是在客户端生成DOM树。
  • 服务端渲染会加快页面的响应速度,客户端渲染页面的响应速度慢。
  • 客户端异步渲染是很难被爬虫抓取到的,渲染不利于SEO搜索引擎优化。而服务端渲染是可以被爬虫抓取到的。但是真正的网站既不是纯异步也不是纯服务端渲染出来的而是两者结合来做的

       例如京东的商品列表就采用的是服务端渲染,目的了为了SEO搜索引擎优化
       而它的商品评论列表为了用户体验,而且也不需要 S印优化,所以采用是客户端渲染
       服务端渲染逻辑分离的不好,不利于前后端分离,开发效率低,客户端渲染是采用前后         端分离的方式开发,效率更高。

 原文链接:客户端渲染和服务端渲染区别_B~~的博客-CSDN博客 

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

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

相关文章

python版《羊了个羊》游戏开发第一天

Python小型项目实战教学课《羊了个羊》 一、项目开发大纲(初级) 版本1.0:基本开发 课次 内容 技术 第一天 基本游戏地图数据 面向过程 第二天 鼠标点击和移动 面向对象 第三天 消除 设计模式:单例模式 第四天 完整…

OpenCV 中的光流 (C++/Python)

什么是光流? 光流是一项视频中两个连续帧之间每像素运动估计的任务。基本上,光流任务意味着计算像素的位移矢量作为两个相邻图像之间的对象位移差。光流的主要思想是估计物体由其运动或相机运动引起的位移矢量。 理论基础 假设我们有一个灰度图像——具有像素强度的矩阵。我…

JavaSE【继承和多态】(1)(重点:初始化、pretected封装、组合)

一、继承 继承 (inheritance) 机制 :是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特 性 的基础上进行扩展,增加新功能 ,这样产生新的类,称 派生类 。 继承呈现了面向对象程序设计的层次结…

在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解

官网地址:Apache ECharts ​一、下载插件并在页面中引入 npm install echarts --save 页面导入: import * as echarts from echarts 全局导入: main.js 中,导入并注册到全局 import echarts from echarts Vue.prototype.$echart…

Flume原理剖析

一、介绍 Flume是一个高可用、高可靠,分布式的海量日志采集、聚合和传输的系统。Flume支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制&…

日常开发中Git命令指北

Git基本操作 创建化仓库 mkdir 目录 cd 目录 git init配置本地仓库 # 配置用户名,邮箱 git config user.name "cxf" git config user.email "1969612859qq.com" # 查看本地配置(小写的 L) git config -l # 重置配置&a…

【SpringCloud】RabbitMQ基础

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式: 同步通讯:就像打电话,需要实时响应。 异步通讯:就像发邮件,不需要马上回复。 两种方式各有优劣,打电话可以立即得到响应,…

【locust】使用locust + boomer实现对接口的压测

目录 背景 环境安装 脚本编写 master slave节点(golang/boomer) 问题 资料获取方法 背景 很早之前,考虑单机执行能力,使用locust做过公司短信网关的压测工作,后来发现了一个golang版本的locust,性能…

将程序添加到右键菜单快速启动

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 效果如下 以 Windows Terminal 为例 打开注册表编辑器:按下 Win R 键,输入 regedit,然后按回车键打开注册表编辑器。 在注册表编辑器中导航到以下路径: HKE…

LabVIEW对并行机器人结构进行建模仿真

LabVIEW对并行机器人结构进行建模仿真 为了对复杂机器人结构的数学模型进行建模、搜索、动画和验证,在工业机器人动态行为实验室中,设计并实现了具有五个自由度的单臂型机器人。在研究台上可以区分以下元素:带有直流电机和编码器的机器人;稳…

新的里程碑!纪念正月十六工作室博客总访问量突破两百万

时值盛夏,清风徐徐,不觉间我们的博客访问量又迈入了新的里程碑——访问量突破两百万! 总访问量突破百万: 个人成就: 记得上次突破重大里程碑还是去年夏天,那时我们重修岳阳楼,追往忆&#…

【2.1】Java微服务:详解Hystrix

✅作者简介:大家好,我是 Meteors., 向往着更加简洁高效的代码写法与编程方式,持续分享Java技术内容。 🍎个人主页:Meteors.的博客 💞当前专栏: Java微服务 ✨特色专栏: 知识分享 &am…

考研408 | 【计算机网络】 数据链路层

导图: 数据链路层概念: 结点:主机、路由器 链路:网络中两个结点之间的物理通道,链路的传输介质主要有双绞线、光纤和微波。分为有线链路、无线链路。 数据链路:网络中两个结点之间的逻辑通道&#xff0…

【Archaius技术专题】「Netflix原生态」动态化配置服务之微服务配置组件变色龙

前提介绍 如果要设计开发一套微服务基础架构,参数化配置是一个非常重要的点,而Netflix也开源了一个叫变色龙Archaius的配置中心客户端,而且Archaius可以说是比其他客户端具备更多生产级特性,也更灵活。*在NetflixOSS微服务技术栈…

uni-app使用vue语法进行开发注意事项

目录 uni-app 项目目录结构 生命周期 路由 路由跳转 页面栈 条件编译 文本渲染 样式渲染 条件渲染 遍历渲染 事件处理 事件修饰符 uni-app 项目目录结构 组件/标签 使用(类似)小程序 语法/结构 使用vue 具体项目目录如下: 生命…

intelJ IDEA\PHPStorm \WebStorm\PyCharm 通过ssh连接远程Mysql\Postgresql等数据库

最容易出错的地方是在general面板下的host,不应该填真实的host地址,而应该填localhost或者127.0.0.1 具体操作步骤见下图

opencv基础49-图像轮廓02-矩特征cv2.moments()->(形状分析、物体检测、图像识别、匹配)

矩特征(Moments Features)是用于图像分析和模式识别的一种特征表示方法,用来描述图像的形状、几何特征和统计信息。矩特征可以用于识别图像中的对象、检测形状以及进行图像分类等任务。 矩特征通过计算图像像素的高阶矩来提取特征。这些矩可以…

[OnWork.Tools]系列 05-系统工具

简介 系统工具主要是将Window常用工具的快捷启动的集合 双击快速启动 计算器,记事本,截图,画图工具 控制面板,服务管理,关闭显示器,关机 启动文件夹,我的电脑,管理工具 右键菜单 添加快捷方式到桌面

React diff 根据相对位置的 diff 算法

文章目录 diff 算法没有 key 时的diff通过 key 的 diff查找需要移动的节点移动节点添加新元素移除不存在的元素缺点 diff 算法 没有 key 时的diff 根据新旧列表的长度进行 diff 公共长度相同的部分直接patch新列表长度>旧列表长度则添加,否则删除 function pa…

WPF实战项目十一(API篇):待办事项功能api接口

1、新建ToDoController.cs继承基础控制器BaseApiController,但是一般业务代码不写在控制器内,业务代码写在Service,先新建统一返回值格式ApiResponse.cs: public class ApiResponse{public ApiResponse(bool status, string mess…