后端渲染html、前端模板渲染html，jquery的html

作者：赵魏璇
链接：https://www.zhihu.com/question/28725977/answer/116177149
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

作者：貘吃馍香
链接：https://www.zhihu.com/question/28725977/answer/41877597

区别在于以下几点

1、后端渲染
实现：后端拼字符串呗…… （理论上后端模板也是字符串）
好处：模板统一在后端。前端（相对）省事，不占用客户端运算资源（解析模板），只要不大改结构，文字啥的小修改后端改了就好了。
坏处：占用（部分、少部分）服务器运算资源、，response 出的数据量会（稍）大点，模板改了前端的交互和样式什么的一样得跟着联动修改。

2、前端模板
实现：看这个吧……关于模板引擎的工作方式和性能？ - 前端开发 但不仅限于正则替换这一招，扫token 生成语法树，再根据语法树拼接也行，或者使用 DOM 模板，借助 DOM API 处理也行，反正招儿多了去了。
好处：不占用服务端运算资源（解析模板），模板在前端（很有可能仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。不用麻烦后端再联调神马的。
坏处：占用（一部分、少部分）客户端运算资源（解析模板）。前端代码多点，毕竟包含模板代码了么。脚本是不是首次下就慢点了（看你在意不在意这个毕竟能304和CDN啥的）。可能造成前后两份模板的情况，总归要后端吐出个首屏啥的先让用户看见吧。那这部分页面模板不就是后端拼好了吐出来的么。

3、jquery的html，append等方法（包括浏览器原生相关DOM API）
实现：……这就不说了吧，不就是直接插内容或者DOM节点么。除非后端是直接吐出拼好的页面，否则不关后端是通过接口吐的html字符串还是模板数据，怎么着不都得是通过这些玩意整页面里去么。
好处：（兴许是）灵活…… 还有因为一竿子捅到底了，直接使用（前端可控的）最终API，所以除了是后端直接吐的页面外，这种方式是（相对）执行效率最高的……
坏处：各种字符串和DOM节点拼来拼去真的很烦……

1.前端渲染是在客户端完成字符串替换，后端渲染当然在服务器完成，这并不说明前端渲染下载的资源就一定比后端渲染要少，有时候需要下载的东西更多，比如多了模板语法，多了某一种模板js文件，你知道，一个页面的性能的绝大部分还是取决于你下载的内容重量。
2.大部分人说前端渲染可以在客户端生成代码而无需下载，但是生成代码也是非常耗时间的操作，同样生成代码也需要根据服务器返回的数据，还是需要等待数据下载完成才能着手生成代码。
3.单页面应用可以使用前端渲染，在性能不差的条件下能给服务器减少一点压力，而且体验也要好一点，但是除此之外，就要放弃一些东西，比如搜索引擎优化，关键字优化。
4.后台渲染还有一个非常明显的优点，就是可能生成缓存片段，生成静态化文件，这也可以减少数据库查询的性能，甚至减少渲染页面的开销，这对相对数据变化不大的页面非常高效。这些如果在配合一款内存数据库，真的可以非常高效的解决大部分问题
5.从可维护或者工程化来讲，前端渲染更好维护，后端也省了很多工作，但是后端省的工作并不是不需要做，只是转给了前端而已，前端这个时候可能需要维护俩套代码，最后你会发现，本来应该相同的代码最后不同了，这是因为某一天你偷个懒，直接更新了模板而没有更新你的静态文件。。。