模板渲染

當獲取到數(shù)據(jù)庫的數(shù)據(jù)之后，按照一定的規(guī)則將其載入到寫好的模板中，輸出成在瀏覽器顯示的HTML頁面，這個過程就是渲染。

后端渲染

優(yōu)點：對搜索引擎友好，首屏加載時間短
缺點：不利于前后端分離，開發(fā)效率低，占用服務器資源

服務器進程從數(shù)據(jù)庫獲取數(shù)據(jù)后，利用后端模板引擎，將數(shù)據(jù)加載進來生成HTML，并返回到客戶端，最終被瀏覽器解析成可見的頁面

首頁加載時間短：后端渲染加載完成后就直接返回顯示 HTML，但前端渲染在加載完成 后還需要有一段 js 渲染的時間。

image.png

image.png

image.png

前端渲染

1. 局部刷新。無需每次都進行完整頁面請求

2. 懶加載。如在頁面初始時只加載可視區(qū)域內(nèi)的數(shù)據(jù)，滾動后加載其它數(shù)據(jù)，可以通過react-lazyload 實現(xiàn)

3. 富交互。使用 JS 實現(xiàn)各種酷炫效果

4. 節(jié)約服務器成本。省電省錢，JS 支持 CDN 部署，且部署極其簡單，只需要服務器支持靜態(tài)文件即可

5. 天生的關注分離設計。服務器來訪問數(shù)據(jù)庫提供接口，JS 只關注數(shù)據(jù)獲取和展現(xiàn)

6. JS 一次學習，到處使用。可以用來開發(fā) Web、Serve、Mobile、Desktop 類型的應用

同構渲染

總結

渲染的本質(zhì)都是一樣的，都是字符串的拼接

• 將數(shù)據(jù)渲染進一些固定格式的html代碼中形成最終的html展示在用戶頁面上。
• 字符串的拼接，必然會引起性能的消耗
• 服務端渲染：性能消耗在服務端。
  當用戶量比較大的時候，可以緩存部分數(shù)據(jù)來避免過多數(shù)據(jù)的重復渲染
• 客戶端渲染：在首次渲染時，大多是將原h(huán)tml中的數(shù)據(jù)標記替換掉

服務端渲染性能消耗在服務端，當用戶量比較多時，緩存部分數(shù)據(jù)以避免過多數(shù)據(jù)重復渲染。 客戶端渲染，如當下火熱的 spa 框架，Angular、React、Vue，在首次渲染時，大多是將原 html 中的數(shù)據(jù)標記（如 {{ text }} ）替換?？蛻舳虽秩据^難的一點是數(shù)據(jù)更新以后，頁面響應式更新時如何節(jié)省資源，直接 DOM 的讀寫，是很消耗性能的。 Vue 2.0 + 有 Vnode，進行 diff 后，渲染到頁面上。

http://m.itdecent.cn/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/ 中文官網(wǎng)

Helpers：
在Helper里也能做一些判斷，然后在頁面上使用else判斷；
通過return options.fn(this)返回true的結果，
通過return options.inverse(this)返回else要執(zhí)行的內(nèi)容

#模板
{{#equal data1 data2}}
  <p>兩個數(shù)相等</p>
{{else}}
  <p>不相等</p>
{{/equal}}

#js
Handlebars.registerHelper("equal",function(v1,v2,options){
   if(v1 == v2){
     //滿足添加繼續(xù)執(zhí)行
     return options.fn(this);
   }else{
     //不滿足條件執(zhí)行{{else}}部分
     return options.inverse(this);
  }
});

• select

Paste_Image.png

Paste_Image.png