問題描述

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

問題解答

回答1：

實(shí)際上這是一個(gè)很大的話題，不過我不打算在這里展開講，因?yàn)樘M(fèi)勁了——要搞明白這里面的全部細(xì)節(jié)，只懂 Angular 是不夠的。

重點(diǎn)概述我就說兩點(diǎn)：

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

實(shí)際上你要相信現(xiàn)代瀏覽器的性能是很強(qiáng)的，客戶端渲染并非很多人想象中的“性能瓶頸”，很多在服務(wù)端渲染的嘗試（對(duì)于 Angular 來說）反而主要是為了搜索引擎優(yōu)化而不是性能提升。我給你一些關(guān)鍵字去調(diào)研吧，這是一個(gè)學(xué)習(xí)的好機(jī)會(huì)（用英文搜索引擎，中文的沒什么有用的結(jié)果）：

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

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

回答2：

從搜索引擎優(yōu)化角度看，這么做也是很有意義的。適合AngularJS 的現(xiàn)成工具有

prerender.io

angularjs-server

淘寶的中途島應(yīng)該也是相近的出發(fā)點(diǎn)