首先，預編譯跟前后端沒有關系，預編譯一樣可以用於后端渲染。
看看下面的測試時間，單位: 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 也沒多大作用，如果實在要考慮：
- 可以使用 pjax / quickling / hash bang 等技術
- 服務器端根據 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 還是要差些的，放到瀏覽器端渲染可能白屏時間更長一些