渲染工作应该由谁完成？

时下，前端 UI 设计越来越复杂，可谓“XX与XX齐飞，XX共XX一色”。
越来越复杂的 UI 意味着越来越重的渲染工作。

目前通常有两种选择：服务器渲染 与 客户端渲染

笔者是支持客户端渲染的（没错就是钦点的）

以 Jade, YAML 为代表的模板渲染引擎一般作用于服务器作为后端的视图部分。
而使用 JavaScript 直接处理 HTML DOM 则是作用于前端，性质是客户端执行渲染。

两者在最终用户看到的效果是一致的。
Web App 最终都还是要落实到HTML，CSS，JavaScript上才能体现到用户界面上。
归根结底，后端渲染是将一些模板规范语言翻译成如上三种语言回传给前端；而前端渲染则是将整个生成逻辑代码全部回传前端，再由客户端生成用户界面。

为什么会有服务器渲染与客户端渲染？

一开始，Web App 直接由若干 HTML，CSS， JS 组成，每一个页面需要特殊的逻辑，因此随着App规模的扩大，后端网站目录下的代码文件就越来越多，而且，彼此之间是没有同步的，比如你改了站点的布局风格。那么你很可能需要改动成百上千的HTML文件，这谁能忍?

聪明的工程师们想到，既然如此多的HTML具有一定的逻辑联系，何不使用代码生成代码？于是后端模板语言诞生了，这可是前端狗的一大痛点啊，于是人们开始广泛使用模板语言代替手写HTML。我认为，模板语言的成功源于它成功地减少了前端工程师的工作量。

后端模板渲染的思路应该是源自“如何管理数以千计的存储于后端的前端页面的版本一致？”这个问题的。通过代码生成代码，本质上是编译，他们基于HTML等基础语言作了更高层次的抽象封装，增强了易用性。各种模板语言大同小异，但大多都有模板中的模板这样的性质来完成继承这样的面向对象特性。

可能，当时工程师们没有考虑前端渲染的一大原因是以JavaScript为代表的前端技术尚未崛起。现在H5，CSS3，JS 受到越来越广的普及使得前端的可作为性大大提升，特别是在Node.js出现以后 JS 工程师维护后端的成本大大降低。

编写本文时尚不考虑当时普及度不高的 ES6，尽管它具有更多有用的特性

在一些jQuery用户的角度看来，JS生成前端无非就是这样的

var e = document.createElement('div');
$('#container').append(e);

你需要先把DOM生成，然后再插入到其他的DOM里去。

纯JS处理DOM确实是一件麻烦事，这可能也是客户端渲染迟迟没有发展起来的原因之一。

考虑一下为什么后端模板语言方便简洁？ 因为它用了与HTML类似的语法。

在PHP，JSP页面里面你可以使用大量的HTML语法，只使用少量的变量注入与迭代注入。

使用HTML进行设计明显比纯JS更方便快捷并且直观。

那么可以借鉴地，解决客户端渲染问题的最后一个锦囊就是引入模板，在这里我们称之为组件(Component)
。

对待模板，新兴的Angular，React，Vue 意见不一，甚至他们对自己在Web App 的定位也不一样。
具体情况可以自己去了解，这并不是本文的重点。

随着前端也支持了模板语言，那么以前的代码管理问题也解决了，以往的后端渲染引擎也大多有了基于JS的前端版本。

前后端真正解耦，前端将专注于UI，后端将专注于数据处理，两端通过设计好的API进行交互，这会是一个趋势，不管你信不信，反正我是这样认为的。

从后端渲染到前端渲染，发生了什么变化？

计算任务转移
原本由服务器执行的渲染任务转移给了客户端，这在大量用户访问的时候大大减轻后端的压力。让后端专注做后端应该做的事情，性能将大大提高，因为服务器做的事情确实减小了，而现在随着客户端软硬件的发展，也能处理好大多数的渲染工作了。
放弃前端权限
将整个UI逻辑交给客户端以后，一些有经验有能力的用户可能会劫持UI，使得他们能够看到一些不该看到的界面。这似乎违反了安全的原则。但是“一切在前端谈安全1都是耍流氓”，后端不能轻信一切从前端传来的数据，切记一定要做好过滤与验证。只要使用SSL、屏蔽XSS、后端不出漏洞，想伪造身份劫持App还是难以做到的。

结语

比起后端渲染，前端渲染既能提升性能，又没有无解的安全问题，何乐不为？
By the way, 安利一发React2，了解了很多React特性，会对UI的存在有一个更深刻的认识。

在前端存在一种名为XSS的攻击，一般通过在页面中插入script标签来远程执行代码。过滤script标签等转义可破被动XSS，另外可以通过提示用户不在console使用未知代码来预防主动XSS攻击。XSS攻击是非常危险的，必须做好防范。 ↩
React 中文站：http://reactjs.cn/ ↩

前端渲染：服务器渲染 or 客户端渲染相关推荐

SSR 学习 - 传统服务端渲染 Web 应用、客户端渲染、同构渲染、优缺点和案例演示
概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案. 在这波前端技术浪潮中,涌现了诸如 React.Vue.Angular 等基于客户端渲染的前端框架. 这类框架所 ...
客户端渲染服务端渲染_这就是赢得客户端渲染的原因
客户端渲染服务端渲染 A decade ago, nearly everyone was rendering their web applications on the server using t ...
服务端渲染（SSR) 和客户端渲染（CSR）
一.服务端渲染(SSR)是什么用户使用的浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将 html 拼接好的,然后返回给前端完整的 html 文件,浏览器拿到这个 html 文件 ...
3d高性能渲染服务器,怎么样用服务器端渲染 3D 模型的同时导出多角度 - 纳金网...
例如汇宝盆上面有个花瓶的3d模型,用户配置花瓶的各项属性,花瓶的背景颜色,花瓶的花纹,花瓶的图案,花瓶的形状,然后在汇宝盆上面显示各个角度观察的花瓶的图片,花瓶顺y轴旋转的图片(正面,背面,四个侧面) ...
前端：客户端渲染 vs 服务器渲染
渲染工作应该由谁完成? 时下,前端 UI 设计越来越复杂,可谓"XX与XX齐飞,XX共XX一色". 越来越复杂的 UI 意味着越来越重的渲染工作. 目前通常有两种选择:服务器渲染 ...
node.js Next框架的三种渲染方式：客户端渲染、SSG、SSR
前言 next是一款用JS开发的全栈框架,它是基于express框架基础上开发而成,可以用react写客户端,node.js写服务端.一份代码可在前后端同时运行,这在next中称之为同构! 一些nex ...
服务端渲染与客户端渲染详解（vue）
1.客户端请求 (1)用户在浏览器输入请求的地址例如:172.0.0.1:8080 到服务器服务器接受到客户端的请求拿到一个没有被数据渲染的空页面 (2)客户端拿到服务端的空字符串页面,然后从上往下 ...
浅析客户端渲染（CSR）与服务端渲染（SSR）
最近刚好公司有项目需要用到服务端渲染,于是花了些时间了整理了关于服务端渲染与客户端渲染的知识,现在记录下来,希望能帮助大家提升对浏览器渲染,服务端渲染的理解,在项目选型上做出正确的决策. 本文会涉及这 ...
客户端渲染(CSR)和服务端渲染(SSR)差别
文章目录客户端渲染服务端渲染两者区别客户端渲染当用户发送请求返回页面,此时页面只是一个模板页面,浏览器解析页面的代码是通过js读取时,根据我们所写的接口去请求数据,得到返回的数据使用页面的模 ...

前端渲染：服务器渲染 or 客户端渲染

渲染工作应该由谁完成？

为什么会有服务器渲染与客户端渲染？

从后端渲染到前端渲染，发生了什么变化？

结语

前端渲染：服务器渲染 or 客户端渲染相关推荐

最新文章

热门文章

前端渲染：服务器渲染 or 客户端渲染

渲染工作应该由谁完成？

为什么会有服务器渲染与客户端渲染？

从 后端渲染 到 前端渲染，发生了什么变化？

结语

前端渲染：服务器渲染 or 客户端渲染相关推荐

最新文章

热门文章

从后端渲染到前端渲染，发生了什么变化？