- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
昨天百度三面,面试官问了这个问题,我也只是回答了大概,今天特地总结一下。
后端渲染
互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面,服务器
进程从数据库获取数据后,后端的程序在把HTML页面吐给前端之前,先把HTML页面
上的特定区域、特定符号,先用数据填充,将数据加载进来生成HTML,然后通过网络
传输到用户的浏览器中解析成可见的页面。
前端渲染
随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,而可能添加了更多
功能性的组件,复杂性更大,另外,彼时ajax的兴起,使得业界就开始推崇前后端分
离的开发模式,即后端不提供完整的HTML页面,而是提供一些API使得前端可以获取
到JSON数据,然后前端拿到JSON数据之后再在前端进行HTML页面的拼接,然后展示
在浏览器上,这就是所谓的前端渲染。
这样前端就可以专注UI的开发,后端专注于逻辑的开发。代表是现在流行的SPA单页面应用,例如Vue、React框架,只需要后端给我们提供接口API,前端UI、交互等全在前端进行,前后端只需要约定接口。
前端渲染的路线
1、请求一个html
2、服务器返回一个html
3、浏览器下载html里面的js/css文件
4、等待js文件下载完成
5、等待js加载并初始化完成
6、js代码终于可以运行,由js代码向后端请求数据
7、等待后端数据返回
8、将数据渲染到页面上
后端渲染路线
1、请求一个html
2、服务端请求数据(内网请求快)
3、服务端初始渲染(服务端性能,较快)
4、服务端返回已经有正确内容的html
5、客户端请求js/css文件
6、等待js文件下载完成
7、客户端把剩下一部分渲染完成(内容小,渲染快)
从后端渲染到前端渲染的变化
1、计算任务的转移
原本由服务器执行的渲染任务转移给了客户端,这在大量用户访问的时候大大
减轻后端的压力。让后端专注做后端应该做的事情,性能将大大提高,因为服务
器做的事情确实减小了,而现在随着客户端软硬件的发展,也能处理好大多数的
渲染工作了。
2、放弃前端权限
将整个UI逻辑交给客户端以后,一些有经验有能力的用户可能会劫持UI,使得
他们能够看到一些不该看到的界面。这似乎违反了安全的原则。但是“一切在前
端谈安全都是耍流氓”,后端不能轻信一切从前端传来的数据,切记一定要做好
过滤与验证。只要使用SSL、屏蔽XSS、后端不出漏洞,想伪造身份劫持App还是
难以做到的。
后端渲染的优缺点:
1、优点:
o 前端耗时少,因为后端拼接完了html,不需要先下载一堆js和css后才能看到
页面,浏览器只需要直接渲染出来。
o 搜索引擎优化,因为在后端有完整的html页面,所以爬虫更容易爬取获得信
息,更有利于SEO。
o 无需占用客户端资源。即解析模板的工作完全交由后端来做,客户端只要解析
标准的HTML页面即可,这样对于客户端的资源占用更少,尤其是移动端,也可
以更省电
o 后端生成静态化文件。即生成缓存片段,这样就可以减少数据库查询浪费的时
间了,且对于数据变化不大的页面非常高效
2、缺点
o 不利于前后端分离,开发效率低。使用服务器端渲染,则无法进行分工合作,
则对于前端复杂度高的项目,不利于项目高效开发。
o 服务器端渲染,则前端一般就是写一个静态HTML文件,然后后端再修改为模
板,这样是非常低效的,并且还常常需要前后端共同完成修改的动作。
o 如果后端改了模板,前端还需要根据改动的模板再调节CSS,这样使得前后端
联调的时间增加。
o 占用服务器端资源,即服务器端完成HTML模板的解析,如果请求较多,会对
服务器造成一定的访问压力。而如果使用前端渲染,就是把这些解析的压力分摊
了前端,而这里确实完全交给了一个服务器.
前端渲染优缺点
优点:
o 前后端分离,前端专注于前端UI,后端专注于API开发,且前端有更多的选择
性,而不需要遵循后端特定的模板
o 体验更好,比如,我们将网站做成单页Web应用(single page web
application,SPA,是加载单个HTML 页面并在用户与应用程序交互时动态更
新该页面的Web应用程序)或者部分内容做成SPA,这样,尤其是移动端,可以
使体验更接近于原生APP
o 局部刷新,无需每次都进行完整页面请求
o 懒加载,如在页面初始时只加载可视区域内的数据,滚动后再加载其它数据,
可以通过 react-lazyload 实现
o 富交互,使用 JS 实现各种酷炫效果
o 节约服务器成本,省电省钱,JS 支持 CDN 部署,且部署极其简单,只需要
服务器支持静态文件即可。
缺点:
o 前端响应较慢,如果是客户端渲染,前端还要进行拼接字符串的过程,需要耗
费额外的时间,不如服务器端渲染速度快。
o 不利于SEO,目前比如百度、谷歌的爬虫对于SPA都是不认的,只是记录了一
个页面,所以SEO很差.
不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。比如企业级网站,主要功
能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用后端渲
染;而类似后台管理页面,交互性比较强,不需要SEO的考虑,那么就可以使用前端
渲染。
另外,具体使用何种渲染方法并不是绝对的,比如现在一些网站采用了首屏后端渲
染,即对于用户最开始打开的那个页面采用的是后端渲染,这样就保证了渲染速
度,而其他的页面采用前端渲染,这样就完成了前后端分离。
前端渲染我们就以单页面应用程序SPA
来说,我们一般使用ajax
来异步获取数据并且展示。下面时后端渲染爬虫看到的页面
可以看到一个完整的html页面。前端渲染爬虫看到的页面是这样的
我有一个使用 css 列的下拉菜单,当我使用 jquery slide() 时,它会调整下拉框的大小,并重排内容直到达到完整高度。 这是一个工作示例 https://codepen.io/peterg
我有一个带有嵌套 ScrollViewer 的 Expander,如下所示: 代码(简化版)
我想在所有 ajax 调用之后调用一些 javascript 函数。我知道如何调用每个单独的 ajax 调用中的函数,如下所示: function xyz() { if (window.XMLHttp
我想将值从应用程序端传递到 api。在此 api 调用中传递图像、名字、电子邮件、电话和位置。在 Debug模式下,检查值不会被传递。 代码下方 File file = null;
我正在尝试在使用reportlab生成的pdf中的表格后插入分页符,我正在使用以下函数生成pdf: def render_to_pdf(template_src, context_dict): t
CBPeripheralManager 是否有推荐的方法来终止连接。到目前为止我发现的最好的方法就是干脆不响应动态值,然后 BLE 堆栈似乎关闭了连接,但这似乎很粗糙。 一定有更好的方法吗? 最佳答案
我的 API 的 REST 端位于以下地址:http://test.jll.aplikacje-dedykowane.pl/rest/warehouse/all 。现在,我尝试返回在此页面准备的 JS
我有以下 CPP 代码。我想做的是,当我的 native 端发生错误时,我会通知 Java 该错误。我用了How can I catch SIGSEGV (segmentation fault) an
限制对象的方法之一是像这样给函数添加限制 def ten_objects(): obj = Model.objects.all()[0:10] # limit to 10 retur
我目前在电信公司实习,这是一个专业,也是本科生。我有很多选择。据我所知,我知道独立应用程序端的 c、c++、c#、java 语言,在移动端我尝试进入 android 世界,也知道 php、mysql、
我想让我的边框底部看起来像这样: 有一个 flex 的末端。目前它看起来像这样: 我尝试使用的 CSS 是 border-bottom-right-radius: 10px;。代码如下所示:
我有一个 Flutter 项目,突然间,据我所知,我没有做任何特别的事情..Android 端开始显示错误,我完全迷路了,我完全不知道哪里出了问题,也不知道为什么会这样。 这就是我打开 android
我有一个自定义对象列表 (List) 。我需要将此数据发送到 React Native 端以显示在平面列表中。我该怎么做?这个列表出现在 类 NativeToReact(reactContext:Re
我有这个代码: #if defined(NOT_STANDALONE) JNIEXPORT void JNICALL sumTraces (JNIEnv* env, jclass caller,
我有一个定义一对多模型关系的 Django 应用程序。模型如下所示: from django.db import models # Create your models here. class Str
我有以下代码,它根据 IFrame 内容的大小调整 IFrame 的大小: function setIframeHeight(id) {
如何创建自定义过滤器 angularjs javascript Controller 端?我想通过 SegmentId 在名为段的数组中搜索,以创建过滤器,该过滤器通过 SegmentId 在段数组搜
我的代码在 netbeans 8.0.2 中我几乎尝试了所有方法,但没有结果。请帮助我。如何在 netbeans 中显示它? 最佳答案 您只需单击源包(源文件),它就会显示您的项目文件。 关于java
我想这是纯 C++ 问题和 OpenGL 问题之间的一种交叉。我有一个统一的缓冲区,并在其中分配 sizeof(ShaderData) 字节的空间。我在着色器的 GPU 端使用 std140 布局。
我对 Hadoop 中 reduce 端的文件合并过程的理解有问题,因为它在“Hadoop:权威指南”(Tom White)中有所描述。引用它: When all the map outputs ha
我是一名优秀的程序员,十分优秀!