客户端渲染与服务端渲染

本人是前端小白菜,最近在苦学前端,做点自己的学习小总结。欢迎各位大佬纠错。
模版引擎原来一开始是后端使用的,后来才慢慢支持前端,听起来很高大上的模版引擎,什么页面渲染,我不喜欢这么专业的难懂的叫法,所以我要自己亲自总结一下。

服务端渲染

在这里插入图片描述
模版引擎不关心内容,只关心自己能识别的模版语法,比如art-template只识别 {{ }} 这种胡须语法块,在读取HTML静态页面的时候,其实就是读取一大串字符串,然后在字符串之间夹着 {{ name }} , {{ if sex !==‘male’ }} , {{ each XX of List }}等等语法块的时候,就是用字符串替换,把那个占位符作用的语法块替换掉,循环有一套替换规则,if 判断也有自己的一套替换规则,替换的内容可以是自己定义的,也可以是数据库查出来的,可以是请求别人接口得到的等等都可以,然后再把填充好数据的HTML页面(其实就是一个String),发给浏览器,让浏览器读取,解析,展示。
在这里插入图片描述
这样做其实对服务器带宽会有一定要求,因为是服务端一次加载全部展示数据,渲染后的页面很大(包含着大量图片,视频,音频),就会导致页面首次加载很慢,第二次刷新因为有缓存的原因,相对会快一点,这样就是通过模版引擎做的服务端渲染。。。现在很多电商网站都会采用这一种方式吧,算是比较主流。这样只发起一次请求,却要服务端完成这么多替换操作,数据填充,循环,判断,应该算是计算密集型吧?

客户端渲染

在这里插入图片描述
而客户端渲染,最常见的例子,就是让我想起了那年夏天,在大学闷热的机房,女老师教我们的静态页面,那些标签,左右浮动效果,以及AJAX异步,在客户发起请求的时候,返回一个页面,数据展示还是空的,需要过一两秒,或者需要鼠标移动,下拉之类的触发ajax异步,通过异步的方式再次向服务器发起请求,再返回数据,这样的用户体验相对会比较好吧,虽然有点奇怪,看着一个空网站,然后才有数据慢慢展示,这样的渲染一个页面,发起的请求是多次的,算是IO密集型吧?

我做过WebMagic+Selenium的动态爬虫(在另外一篇博客),当时需求如果爬取服务端渲染的数据,它是跟随着页面一起展示的,非常好拿,整个页面拿回来再解析就行了,通过简简单单的CURL,JSOUP,XSOUP之类的都可以搞定。如果是客户端渲染,它数据展示有触发条件,所以要用自动化测试工具selenium那一套模拟人的操作,去触发了客户端数据渲染,再放小虫子进去收割。
好了,总结就先到这里,有说的不对的地方欢迎大佬纠错哦

热门文章

暂无图片
编程学习 ·

mysql8 windows版密码忘记如何重新设置?

本机安装位置:D:\Program Files (x86)\java\mysql-8.0.13-winx64重设密码具体过程:还好有一个navicat的连接可以打开,查看其中的用户名和主机名称(一般默认是这个,改了又忘了的话我也没办法了)打开cmd,用管理员的身份运行,先关闭mysql(net stop mysql);然后进入mysql8所…
暂无图片
编程学习 ·

二、21【设计模式】之状态模式

今天的博客主题设计模式 ——》 设计模式之状态模式状态模式 SP (State Pattern)定义允许对象在内部状态发生改变时改变它的行为,看起来好像修改了它的类。类的行为是由状态决定的,不同的状态下该类有不同的行为。就是一个对象在其内部改变的时候,它的行为也随之改变。核心…
暂无图片
编程学习 ·

POJ练习题之:败方树

问题描述 给定一个整数数组,要求对数组中的元素构建败方树(数组相邻元素两两比较,从第一个元素开始)。之后修改数组中的元素,要求输出初始构建以及修改后得到的败方树的所有内部结点代表的整数(从左到右从上到下输出) 输入 第一行为数组的元素个数n和修改的次数m。 第二行…
暂无图片
编程学习 ·

718. 最长重复子数组

给两个整数数组 A 和 B ,返回两个数组中公共的、长度最长的子数组的长度。目录1、题目分析2、解题分析3、代码示例 1:输入: A: [1,2,3,2,1] B: [3,2,1,4,7] 输出: 3 解释: 长度最长的公共子数组是 [3, 2, 1]。1、题目分析求两个数组公共的子数组的长度,那么可以用较短的那个…
暂无图片
编程学习 ·

四.面向对象

解释说明姓名 职位 动作张三 程序员 打卡,开会李四 前台 打卡,开会王五 财务 打卡,开会用表格表示一组数据,表结构理解为类,每一行数据对应一个对象; 姓名、职位相当于类中的属性; 动作早会相当于类中的方法; 面向过程:执行者思维,对于简单问题,比如开车步骤 按照12…
暂无图片
中恒嘉业 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络:信息往一个方向流动。包括MLP和CNN 循环神经网络:信息循环流动,网络隐含层输出又作为自身输入,包括RNN、LSTM、GAN等。 RNN模型结构如下图所示: 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
郑州普通话 ·

[Redux/Mobx] Redux和vuex有什么区别?

[Redux/Mobx] Redux和vuex有什么区别? 1:vuex的异步数据不需要使用到中件间,redux需要 2:vuex可以直接commit,action不是必须的,redux是必须的 个人简介 我是歌谣,欢迎和大家一起交流前后端知…
暂无图片
郑州普通话 ·

flex布局常见的一些案例

风华正茂的年纪遇到你,是我最大的幸运,谢谢你,靠近我,了解我,治愈我,陪着我,谢谢你来爱我。 flex是啥:是一种弹性布局方式。(注意这个弹) flex属性值大全&…
暂无图片
代理记账 ·

[Redux/Mobx] Redux和vuex有什么区别?

[Redux/Mobx] Redux和vuex有什么区别? 1:vuex的异步数据不需要使用到中件间,redux需要 2:vuex可以直接commit,action不是必须的,redux是必须的 个人简介 我是歌谣,欢迎和大家一起交流前后端知…
暂无图片
代理记账 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络:信息往一个方向流动。包括MLP和CNN 循环神经网络:信息循环流动,网络隐含层输出又作为自身输入,包括RNN、LSTM、GAN等。 RNN模型结构如下图所示: 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
cgfy ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络:信息往一个方向流动。包括MLP和CNN 循环神经网络:信息循环流动,网络隐含层输出又作为自身输入,包括RNN、LSTM、GAN等。 RNN模型结构如下图所示: 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
coreui ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
未来博客 ·

Heap Sort 讲解

Heap Sort sorts a group of unordered elements using the Heap data structure. The sorting algorithm using a Min Heap is as follows: Heapify all elements into a Min HeapRecord and delete the top elementPut to top element into an array T that stores all so
暂无图片
建站日记 ·

[react] 你觉得react上手快不快?它有哪些限制?

[react] 你觉得react上手快不快?它有哪些限制? 相对vue来说不快。 限制 需要学习JSX需要工程化的配置需要对原生JavaScript有相当的掌握react只是一个UI层面的库,像vue内置了动画处理、keep-alive等功能,react则需要去找第三方库…
暂无图片
mfbz ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络:信息往一个方向流动。包括MLP和CNN 循环神经网络:信息循环流动,网络隐含层输出又作为自身输入,包括RNN、LSTM、GAN等。 RNN模型结构如下图所示: 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
mfbz ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法! 拓扑排序的过程中,由于需要查找所有以某顶点为尾的弧,即找到该顶点的所有出边,故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同,由于要查找入度为0的点…
暂无图片
珊珊日记 ·

学习笔记六——循环神经网络

一、RNN 前馈神经网络:信息往一个方向流动。包括MLP和CNN 循环神经网络:信息循环流动,网络隐含层输出又作为自身输入,包括RNN、LSTM、GAN等。 RNN模型结构如下图所示: 展开之后相当于堆叠多个共享隐含层参数的前馈…
暂无图片
珊珊日记 ·

AOV网是否存在回路-拓扑排序-C++

拓扑排序是对测试AOV网是否存在回路的方法! 拓扑排序的过程中,由于需要查找所有以某顶点为尾的弧,即找到该顶点的所有出边,故图要采用邻接表的存储方式。但拓扑排序较邻接表的存储方式有一点不同,由于要查找入度为0的点…