服務端模版引擎和客戶端模版引擎隨手寫寫

模版引擎

模版引擎（Template Engine），是一項展示層與數據分離的技術。能夠分開處理展示層和數據，再經過模版引擎按照必定的語義將數據填充進展示層，造成最終的HTML頁面。

模版引擎分爲兩種：服務端模版引擎、客戶端模版引擎。

服務端模版引擎

在服務端將數據填入模版，返回相應的HTML頁面。

優勢：

• 須要在服務端作相關計算
• 首屏響應速度快，不用等待js的加載和渲染

缺點：

• 頁面的每一次改動都要從新請求模版，和服務端交互頻繁，影響效率。

客戶端模版引擎

將模板和數據分別傳送到客戶端，在客戶端由js渲染出最終的HTML視圖。自從有了ajax，用戶交互部分直接能夠用過ajax請求傳回的數據在客戶端作渲染，不用每次都請求服務端模版，因此客戶端模版引擎的使用開始變得頻繁。

優勢：

• 須要用戶交互的地方不用頻繁對服務器發請求，節省交互時間。
• 使先後端分離，後端專心作業務邏輯，而前端專心作用戶交互。
• 客戶端能夠對模版文件進行緩存，大大減少服務端負荷。

缺點：

• 不利於SEO
• 客戶端須要作大量的渲染計算，影響首屏響應時間。

先後端模版引擎的結合

• 將不須要頻繁變化、要減小初始化加載的部分放在服務端
• 將和用戶交互相關、可能會頻繁變化的部分放在客戶端處理

*小tips：

SEO（Search Engine Optimization 搜索引擎優化）：由於搜索引擎只識別HTML代碼，對JS代碼不識別。致使客戶端模版引擎不利於SEO。

SEO收集文本的元素：

• <title> 標記。

• <meta name="description"> 標記。
• <meta name="keywords"> 標記。
• 標題標記（<h1> 至 <h6>）。
• 超連接（<a> 標記）。