模板渲染

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

后端渲染

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

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

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

image.png

image.png

image.png

前端渲染

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

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

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

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

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

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

同構(gòu)渲染

總結(jié)

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

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

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

http://www.itdecent.cn/p/0719c6102639

以下是模板渲染的一個(gè)例子

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的結(jié)果，
通過return options.inverse(this)返回else要執(zhí)行的內(nèi)容

#模板
{{#equal data1 data2}}
  <p>兩個(gè)數(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