在Scalyr，最近我們著手重寫我們的web客戶端， Scalyr Logs是多用途監(jiān)視和日志分析工具，在我們專用的日志數(shù)據(jù)庫執(zhí)行大多數(shù)的query都控制在幾十毫秒，但是每一次的頁面響應(yīng)都需要加載頁面，大概需要好幾秒才可以呈現(xiàn)給用戶。

單頁面設(shè)計(jì)架構(gòu)承諾不會(huì)再拖后臺(tái)的強(qiáng)勁表現(xiàn)的后退，所以我們開始尋找合適的框架，一個(gè)名叫AngularJS的脫穎而出，遵循著“fail fast”的原則，我們開始了挑戰(zhàn)之旅：log 視圖的重寫。

測(cè)試一個(gè)應(yīng)用框架確實(shí)是個(gè)嚴(yán)峻的挑戰(zhàn)，當(dāng)用戶點(diǎn)擊日志中任何一個(gè)單詞，我們就要搜索出相關(guān)信息，而頁面上可以點(diǎn)擊的元素又不計(jì)其數(shù)；我們想讓日志的分頁功能也瞬間得到反饋。我們其實(shí)已經(jīng)預(yù)先獲取到了下一頁面的日志數(shù)據(jù)，所以用戶接口的更新就成為了瓶頸，如果拿 AngularJS直接實(shí)現(xiàn)日志視圖的換頁功能需要1.2秒，但是如果仔細(xì)優(yōu)化一下的話就可以降到35毫秒。這些優(yōu)化被證明在應(yīng)用的其他部分也是適用的，并且對(duì)AngularJS適應(yīng)性也很好。但我們必須打破一些規(guī)則來實(shí)現(xiàn)我們的想法，稍后討論。

一個(gè)Github更新的日志demo

An AngularJS log viewer

本質(zhì)上，日志視圖就是一個(gè)日志消息的列表，每個(gè)字都可以點(diǎn)擊。所以把Angular的指令加到DOM元素中，簡(jiǎn)單實(shí)現(xiàn)如下：

<span class=’logLine’ ng-repeat=’line in logLinesToShow’> 
 <span class=’logToken’ ng-repeat=’token in line’>{{token | formatToken}} </span> 
   
</span> 

在單頁面應(yīng)用中有個(gè)數(shù)千個(gè)tokens是很正常的，在早期的測(cè)試中，我們發(fā)現(xiàn)進(jìn)入日志的下一頁會(huì)花費(fèi)好幾秒來執(zhí)行JavaScript。更糟的是，不相關(guān)的操作(比如點(diǎn)擊導(dǎo)航下拉框)延遲也不輕，AngularJS的大神說***把數(shù)據(jù)元素綁定的數(shù)量控制在200以下。對(duì)于一個(gè)單詞就是一個(gè)元素的我們來說，早已遠(yuǎn)超這個(gè)數(shù)。

分析

用Chrome的JavaScript profiler工具，我們可以快速定位兩個(gè)拖延點(diǎn)。首先，每次更新要花大量時(shí)間在DOM元素的創(chuàng)建和銷毀上，如果新的view有不同的行數(shù)，或者任何一行有不同數(shù)量單詞，Angular的ng-repeat指令就會(huì)創(chuàng)建或者銷毀DOM元素，這個(gè)代價(jià)太大了。

其次，每一個(gè)單詞都有自己的change watcher，AngularJS會(huì)watch這些單詞，一旦鼠標(biāo)點(diǎn)擊就會(huì)觸發(fā)，這個(gè)是影響不相關(guān)操作(下拉菜單導(dǎo)航)延遲的罪魁禍?zhǔn)住?/span>

優(yōu)化#1：緩存DOM elements

我們創(chuàng)建了一個(gè)ng-repeat指令的變體，在我們的版本中，如果綁定數(shù)據(jù)的數(shù)量減少了，超出的DOM元素會(huì)隱藏而不是銷毀，如果元素的數(shù)量過會(huì)兒有增加了，我們會(huì)重用這些緩存的元素。

優(yōu)化#2：Aggregate watchers

用來調(diào)用change watchers的所有時(shí)間大部分都浪費(fèi)了，在我們的應(yīng)用中，特定單詞上的數(shù)據(jù)綁定都是永遠(yuǎn)不會(huì)改變的除非整個(gè)日志消息變化，為了達(dá)成這一點(diǎn)，我們創(chuàng)建了一個(gè)指令”hides“隱藏掉了子元素的change watchers，只有等特定父元素表達(dá)式修改的時(shí)候才會(huì)調(diào)用他們。就這樣，我們避免了在每一次鼠標(biāo)點(diǎn)擊或者其他微小的修改而導(dǎo)致的全盤change watchers(為了實(shí)現(xiàn)這個(gè)想法，我們稍微修改了AngularJS的抽象層，我們稍后再細(xì)說)。

優(yōu)化#3：推遲元素創(chuàng)建

前面說了，我們?yōu)槿罩纠锏拿恳粋€(gè)單詞單***建了DOM，我們可以利用每一行的單個(gè)DOM元素得到相同的視覺呈現(xiàn)；其他元素都是為響應(yīng)鼠標(biāo)點(diǎn)操作而創(chuàng)建的，因此，我們決定推遲這部分創(chuàng)建，只有當(dāng)鼠標(biāo)移動(dòng)到某行的時(shí)候我們?cè)賱?chuàng)建他。

為了實(shí)現(xiàn)這個(gè)，我們?yōu)槊恳恍袆?chuàng)建了兩個(gè)版本，一個(gè)就是簡(jiǎn)單的文本元素來顯示完整的日志信息，另外一行就是個(gè)占位符，用來顯示最終為每一個(gè)單詞填充后 的效果。這個(gè)占位符開始是隱藏的，當(dāng)鼠標(biāo)移動(dòng)到那一行的時(shí)候才會(huì)顯示，而簡(jiǎn)單文本那一行這個(gè)時(shí)候就隱藏掉。下面會(huì)講到，顯示占位符是如何填充單詞元素的。

優(yōu)化#4：避開對(duì)隱藏元素的監(jiān)視

我們創(chuàng)建了另外一個(gè)指令，用來阻止對(duì)隱藏元素的監(jiān)視，這個(gè)指令支持優(yōu)化#1，相較于原數(shù)據(jù)，我們多了更多的隱藏DOM節(jié)點(diǎn)，所以必須消除對(duì)多出來的DOM節(jié)點(diǎn)的監(jiān)視。這也支持優(yōu)化#3，讓推遲單詞節(jié)點(diǎn)的創(chuàng)建更加容易。因?yàn)橹钡竭@行數(shù)據(jù)的tokenized版本出現(xiàn)我們才會(huì)創(chuàng)建他 。

下面的代碼就是所有的優(yōu)化后的樣子，我們自定義的指令是粗體顯示。

<span class=’logLine’ sly-repeat=’line in logLinesToShow’ sly-evaluate-only-when=’logLines’> 
 <div ng-mouseenter=”mouseHasEntered = true”> 
   <span ng-show=’!mouseHasEntered’>{{logLine | formatLine }} </span> 
   <div ng-show=’mouseHasEntered’ sly-prevent-evaluation-when-hidden> 
      <span class=’logToken’ sly-repeat=’tokens in line’>{{token | formatToken }}</span> 
   </div> 
 </div> 
   
</span> 

Sly-repeat 是ng-repeat的變體，用來隱藏多出來的DOM元素而不是銷毀他們，sly-evaluate-only-when阻止內(nèi)部change watchers除非“logLines”變量修改，sly-prevent-evaluation-when-hidden主要負(fù)責(zé)當(dāng)鼠標(biāo)移動(dòng)到指定行的上面的時(shí)候，隱藏的div才顯示。

這里展示出了AngularJS對(duì)于封裝和分離的控制力，我們做了復(fù)雜的優(yōu)化但是并沒有影響模板的結(jié)構(gòu)(這里展示的代碼并不是真正產(chǎn)品里的代碼，但是他展示了所有的要點(diǎn))。

結(jié)果

我們來看一下效果，我們添加了一些代碼來衡量，從鼠標(biāo)點(diǎn)擊開始，一直到Angular’s $digest循環(huán)結(jié)束(意味著更新DOM結(jié)束)。 

我們衡量點(diǎn)擊”下一頁“按鈕的性能是通過Tomcat日志，環(huán)境用的是MacBook Pro上的Chrome，結(jié)果見下表(每個(gè)數(shù)據(jù)都是10次測(cè)試的平均值)：

這些數(shù)據(jù)不包括瀏覽器用在DOM布局和重繪(JavaScript執(zhí)行完成后)的時(shí)間，每次大概30毫秒。盡管如此，效果也顯而易見；下一頁的響應(yīng)時(shí)間從1200毫秒驟降至35毫秒(如果算上渲染是65毫秒)。

“從服務(wù)器獲取數(shù)據(jù)”里的數(shù)據(jù)包括了我們使用AJAX從后端獲取log數(shù)據(jù)的時(shí)間。這個(gè)跟點(diǎn)擊下一頁按鈕不同，因?yàn)槲覀冾A(yù)取下一頁的log數(shù)據(jù)，但是或許適用于其他的UI響應(yīng)。即使這樣，優(yōu)化后的程序也可以做到實(shí)時(shí)更新。

總結(jié)

這些代碼正式運(yùn)轉(zhuǎn)倆月了，結(jié)果相當(dāng)讓人滿意。想看實(shí)際效果的請(qǐng)移步scalyr.com點(diǎn)擊頁面最下面的“Try The Demo”鏈接，然后點(diǎn)擊”Log View”，試一下下一頁按鈕。很快是吧。你一定不敢相信這是從一個(gè)運(yùn)行著的server上看到實(shí)時(shí)數(shù)據(jù)。

實(shí)現(xiàn)上述優(yōu)化確實(shí)花了不少時(shí)間。看起來是我們創(chuàng)建了一個(gè)自定義指令用來生成所有的log視圖，繞開ng-repeat。然后，這些都是有違AngularJS精神的，還要承擔(dān)代碼維護(hù)的成本，測(cè)試成本以及其他因素。因?yàn)?/span>log視圖是我們對(duì)AngularJS做的測(cè)試工程，我們需要驗(yàn)證這個(gè)解決方案的可行性。而且，我們創(chuàng)建的這些新指令已經(jīng)用到了應(yīng)用的別的部分了。

我們盡***努力踐行Angular精神，但是我們必須對(duì)AngularJS的抽象層做出修改才可以實(shí)現(xiàn)這些優(yōu)化。我們僭越了Scope的$watch來攔截watcher注冊(cè)，然后必須倍加小心的操作Scope的實(shí)例變量來控制watcher在$digest過程里的運(yùn)行。

下一次

這篇文章討論了一系列技術(shù)點(diǎn)，我們是效率***化的忠實(shí)擁躉，前面介紹的優(yōu)化只是我們用的一些小妙招而已，在后續(xù)的文章里我們會(huì)繼續(xù)討論如何減少網(wǎng)絡(luò)請(qǐng)求，網(wǎng)絡(luò)延遲，服務(wù)器執(zhí)行時(shí)間等等。當(dāng)然我們會(huì)繼續(xù)討論在開發(fā)自己的應(yīng)用時(shí)是如何構(gòu)建AngularJS的。如果你對(duì)這些感興趣，請(qǐng)留下你們寶貴的意見。

強(qiáng)力插入廣告

在Scalyr，我們一直致力于通過好的技術(shù)來提高DevOps的體驗(yàn)。都讀到這了，不妨來scalyr.com看看我們到底進(jìn)展到哪里了！

原文鏈接：http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/

譯文鏈接：http://blog.jobbole.com/51180/