架构

模板渲染

当获取到数据库的数据之后,按照一定的规则将其载入到写好的模板中,输出成在浏览器显示的HTML页面,这个过程就是渲染。

后端渲染

优点:对搜索引擎友好,首屏加载时间短
缺点:不利于前后端分离,开发效率低,占用服务器资源

服务器进程从数据库获取数据后,利用后端模板引擎,将数据加载进来生成HTML,并返回到客户端,最终被浏览器解析成可见的页面

首页加载时间短:后端渲染加载完成后就直接返回显示 HTML,但前端渲染在加载完成 后还需要有一段 js 渲染的时间。

image.png
image.png
image.png

前端渲染

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

  2. 懒加载。如在页面初始时只加载可视区域内的数据,滚动后加载其它数据,可以通过react-lazyload 实现

  3. 富交互。使用 JS 实现各种酷炫效果

  4. 节约服务器成本。省电省钱,JS 支持 CDN 部署,且部署极其简单,只需要服务器支持静态文件即可

  5. 天生的关注分离设计。服务器来访问数据库提供接口,JS 只关注数据获取和展现

  6. JS 一次学习,到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

同构渲染

总结

渲染的本质都是一样的,都是字符串的拼接

  • 将数据渲染进一些固定格式的html代码中形成最终的html展示在用户页面上。
  • 字符串的拼接,必然会引起性能的消耗
  • 服务端渲染:性能消耗在服务端。
    当用户量比较大的时候,可以缓存部分数据来避免过多数据的重复渲染
  • 客户端渲染:在首次渲染时,大多是将原html中的数据标记替换掉

服务端渲染性能消耗在服务端,当用户量比较多时,缓存部分数据以避免过多数据重复渲染。 客户端渲染,如当下火热的 spa 框架,Angular、React、Vue,在首次渲染时,大多是将原 html 中的数据标记(如 {{ text }} )替换。客户端渲染较难的一点是数据更新以后,页面响应式更新时如何节省资源,直接 DOM 的读写,是很消耗性能的。 Vue 2.0 + 有 Vnode,进行 diff 后,渲染到页面上。

https://www.jianshu.com/p/0719c6102639

以下是模板渲染的一个例子

helper

http://www.cnblogs.com/yldf55/p/5147996.html
http://www.tuicool.com/articles/aiaqMn
http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/ 中文官网

Helpers:
在Helper里也能做一些判断,然后在页面上使用else判断;
通过return options.fn(this)返回true的结果,
通过return options.inverse(this)返回else要执行的内容

#模板
{{#equal data1 data2}}
  <p>两个数相等</p>
{{else}}
  <p>不相等</p>
{{/equal}}

#js
Handlebars.registerHelper("equal",function(v1,v2,options){
   if(v1 == v2){
     //满足添加继续执行
     return options.fn(this);
   }else{
     //不满足条件执行{{else}}部分
     return options.inverse(this);
  }
});
  • select
Paste_Image.png
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容