看看下面的測試時間，單位: ms

模板字串:

var s = '{{#datas}}{{name}} abcdefg {{type}} {{date}}{{/datas}}';

資料物件: 放入100000行資料

var stack = [];
for (var i = 0; i < 100000; i++) {
    stack.push({
        name: 'name-' + i,
        type: 'type-' + i,
        date: (new Date()).toLocaleString()
    });
}
var datas = {datas: stack};
 

後端渲染: 生成HTML

var start = Date.now();
require('hogan').compile(s).render(datas);
var end = Date.now();
console.log(end - start);  // 166 ms　我的機器時間

前端渲染: 我在這裡做了最簡單的設定，只把datas轉化成字串

var start = Date.now();
JSON.stringify(datas);
var end = Date.now();
console.log(end - start);  // 450 ms 我的機器時間

結果對比一目瞭然，你可以把這個測試用其他模板引擎測試一下。

#伺服器為了前端渲染，對物件的字串化所消耗的時間， 遠遠大於　 伺服器直接渲染模板生成HTML所花費的時間。

我的建議是前後端模板同時使用．

後端模板＋Bigpipe處理頁面載入, 加上預編譯, 這要比直接轉換物件=>字串快,　而且減少前端模板檔案的載入量 res.write(require(‘hogan’).compile(s).render(datas)) 要比

res.write(JSON.stringify(datas))快

前端模板, 主要是部分需要ajax載入的部件

剩下一個最難對付的就是SEO，對於不支援js的機器人，還是需要額外的一套非模板的程式碼．

這個問題的焦點並不在“放在哪裡渲染快”，如果你要考慮這個效率問題，那是不是也得同時思考下：

後端渲染完了之後，需要進行網路傳輸的體積大了，帶來的網路損耗和網路傳輸時間問題
很多場景，尤其是在移動端，我們通常不會把渲染工作交給後端，一方面後端渲染需要時間，一方面龐大的渲染資料傳輸也有時延，所以就會出現白屏問題。Bigpipe可以一定程度上處理這個問題，不夠構架成本略高，用的人偏少。 若把資料交給前端渲染，也存在一定的弊端，比如需求發生變化之後，介面需要調整，前端模板的解析也要跟著一起變化，這樣隔著一層介面開發，辦事效率就低了很多，因為我們至少要跟開發同學交涉。

nodejs 的出現讓模板複用方便了不少，很多時候，讓後端渲染一部分（比如首屏部分），後面的工作就交給前端非同步去處理。兩者結合起來效果才是最佳的。

#SEO問題嘛，看產品需求，很多產品優化了 SEO 也沒多大作用，如果實在要考慮：

1.可以使用 pjax / quickling / hash bang 等技術
2.伺服器端根據 UA 輸出內容

不能簡單這麼比吧，你這個測試只說明V8在你伺服器環境上單次執行這個渲染的速度比PC快，但要知道伺服器可是每個請求都執行渲染，影響的是全部使用者，而前端渲染隻影響單機。 所以“後端吐首屏+前端渲染剩下的”是比較合適的辦法。

移動端，如果不是webapp，只需要傳送資料就可以了．安卓和ios客戶端自己管理渲染．

對於ＰＣ端ＨＴＭＬ內容的渲染，我還是比較建議Bigpipe推．

#如果是採用ajax拉，那麼頁面上每一個部件要多增加一個客戶端請求． 而請求帶來的請求體解析，本身是十分消耗伺服器資源的．

比如一個網頁有３個部分，來自３個數據庫請求:

[使用者賬單]　
[使用者訊息]
[使用者文章]
如果是Bigpipe,　過程是這樣的:

客戶端請求
伺服器傳送佈局HTML
伺服器傳送渲染過的
伺服器傳送HTML結束標籤

只有１次伺服器請求

#如果是前端ajax渲染,　過程是這樣的:

客戶端請求
傳送完整HTML佈局頁
客戶端使用者賬單ajax請求
客戶端使用者訊息ajax請求
客戶端使用者文章ajax請求
伺服器傳送使用者賬單資料
伺服器傳送使用者訊息資料
伺服器傳送使用者文章資料
這個過程需要４次客戶端請求． 就算是把後３個ajax合併為一個ajax，也需要２個客戶端請求．

#瀏覽器端渲染優點：

分散服務端渲染時間到瀏覽器端
http response 大小也會減少
對可維護性也有很大好處
很容易搭建 前端獨立的開發環境
減少了模板修改跟後端同步的問題
缺點就是：

seo
首屏會有白屏
最頭疼的一個問題可能是 業務邏輯的問題，因為很容易業務邏輯就跑到 js 來了
前端渲染的方式的話我覺得不一定是 bigpipe ，還要看場景；

#對移動端上我覺得還是後端渲染好些，因為移動端上 cpu 還是要差些的，放到瀏覽器端渲染可能白屏時間更長一些

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選：加入