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

標籤：http   io   ar   os   使用   sp   java   for   strong   

首先，先行編譯跟前後端沒有關係，先行編譯一樣可以用於後端渲染。

看看下面的測試時間，單位: 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 還是要差些的，放到瀏覽器端渲染可能白屏時間更長一些

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