前后端渲染

《精读前后端渲染之争》原文链接https://zhuanlan.zhihu.com/p/26366128

1.    概念

后端渲染:指传统的 ASP、Java 或 PHP 的渲染机制;

前端渲染:指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;

同构渲染:指前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

2.    对比

《精读前后端渲染之争》一文详细阐述了前、后端渲染及同构渲染的优缺点,主要观点如下

方式

特点

前端渲染

1、局部刷新,无需每次都进行完整页面请求

2、懒加载。只加载可视区域数据,滚动后加载其它数据

3、富交互。使用 JS酷炫效果

4、节约服务器成本。省电省钱,支持 CDN 部署,服务端渲染时间减小

5、天生的关注分离设计

6、http response大小也会减少

7、JS一次学习,到处使用。Web、Serve、Mobile、Desktop

后端渲染

1、首屏性能。服务端渲染不需要先下载一堆js和css后才能看到页面

2、SEO

3、不用关心浏览器兼容性问题(随浏览器发展,这个优点逐渐消失)

4、对于电量不给力的手机或平板,减少在客户端的电量消耗很重要

同构渲染

优势:

1. 有助于 SEO

2. 共用前端代码,节省开发时间

3. 提高首屏性能

问题:

1. 性能,大量计算性能低、个性化的缓存无法实现

2. 不容忽视的服务器端和浏览器环境差异(前后端渲染不一致)

3. 内存溢出

4. 异步操作

5. simple store(redux)

结论:

总的来说,同构渲染实施难度大,不够优雅,无论在前端还是服务端,都需要额外改造。

posted @ 2017-06-29 11:01  zhangsai  阅读(274)  评论(0编辑  收藏  举报