[轉]談談前端渲染 VS 後端渲染

首先，預編譯跟先後端沒有關係，預編譯同樣能夠用於後端渲染。

看看下面的測試時間，單位: 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
服務器發送渲染過的<script>用戶帳單</script>
服務器發送渲染過的<script>用戶消息</script>
服務器發送渲染過的<script>用戶文章</script>
服務器發送HTML結束標籤</body></html>

只有１次服務器請求

若是是前端ajax渲染,　過程是這樣的:

客戶端請求
發送完整HTML佈局頁
客戶端用戶帳單ajax請求
客戶端用戶消息ajax請求
客戶端用戶文章ajax請求
服務器發送用戶帳單數據
服務器發送用戶消息數據
服務器發送用戶文章數據

這個過程須要４次客戶端請求． 就算是把後３個ajax合併爲一個ajax，也須要２個客戶端請求．

---

瀏覽器端渲染優勢：

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

缺點就是：

• seo
• 首屏會有白屏
• 最頭疼的一個問題多是 業務邏輯的問題，由於很容易業務邏輯就跑到 js 來了

前端渲染的方式的話我以爲不必定是 bigpipe ，還要看場景；

對移動端上我以爲仍是後端渲染好些，由於移動端上 cpu 仍是要差些的，放到瀏覽器端渲染可能白屏時間更長一些