問題描述

由于angular中使用了大量自定義標簽，所有會在瀏覽器端做很多的計算工作，有沒有一種工具可以將這件事情在發布前先編譯好，這樣就可以避免大部分瀏覽器的計算工作，有這樣的工具嗎？

問題解答

回答1：

實際上這是一個很大的話題，不過我不打算在這里展開講，因為太費勁了——要搞明白這里面的全部細節，只懂 Angular 是不夠的。

重點概述我就說兩點：

模板的預編譯不難（此處指的是把靜態的模版緩存至 $templateCache，從而在應用加載的時候直接把模版載入內存），但是對 Angular 這樣重度依賴數據綁定的框架來說，編譯模版那點工作量不值一提。除非說你的項目無比龐大，模版多的管理不過來——但此時更嚴重的是本地開發時模版預編譯的時間損耗——所以把巨型應用模塊化分割才是正途；這就有點跑題了。像 ng-repeat 這類的指令會是我們想“減輕瀏覽器負擔”的目標，也就是在瀏覽器載入之前就把此類指令展開，填充 DOM；而像 ng-if 這類的指令則不能預先處理，因為它們很多時候都依賴“數據綁定”。我給你舉個例子，比如說頁面上有一個部分由 ng-if 控制，根據當前用戶是否有權限來判斷，但是是否有權限這個狀態必須得等用戶登錄（或者別的預置條件）之后才能獲取到——我們要如何在瀏覽器之外預處理 ng-if？它會涉及到 DOM 操作，它也會影響到瀏覽器性能，你說是預處理還是不預處理？如果所有這樣的標簽都要作一番權衡才能決定是否預處理，那這個代價也太大了，不如不用 Angular。Angular 做不到完全的靜態化（順便一提，ESNext 的 Object.observe() 將是解決的鑰匙），而半靜態化則是可以的，但往往不是因為瀏覽器性能的緣故。

實際上你要相信現代瀏覽器的性能是很強的，客戶端渲染并非很多人想象中的“性能瓶頸”，很多在服務端渲染的嘗試（對于 Angular 來說）反而主要是為了搜索引擎優化而不是性能提升。我給你一些關鍵字去調研吧，這是一個學習的好機會（用英文搜索引擎，中文的沒什么有用的結果）：

server-side renderingrender dom on server-sidenodeangularpre-renderpre-compilephantomjs/casperjsisomorphic js libraries這些關鍵字，你可以把它們拆分組合去探索相關的內容，有很多工具／實踐／教程／探討等著你去挖掘。

總結一下。對于基于“數據綁定”為主的 JS 應用來說（如 Angular），由于目前語言與環境層面的支持還不到位（如前面提到的 Object.observe() 等），因而無法在 DOM 層面實現完整的預編譯或靜態化。在進入瀏覽器之前，通過其他方式預處理部分 DOM 是可能的，但是對應用的整體性能提升或／及瀏覽器的性能提升并沒有天差地別的影響，并且實現這些預處理本身的代價并不小；除非你是做對性能嚴苛至極的應用（比如淘寶這樣的？），否則還是斟酌而定吧。

回答2：

從搜索引擎優化角度看，這么做也是很有意義的。適合AngularJS 的現成工具有

prerender.io

angularjs-server

淘寶的中途島應該也是相近的出發點