這篇文章主要為大家展示了“如何改善AngularJS性能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何改善AngularJS性能”這篇文章吧。
AngularJS 是目前使用非常廣泛的 web app 應用框架，隨著它的受歡迎程度持續(xù)上升 ，期待已久的AngularJS 4.0 誕生了。盡管已經做了很多優(yōu)化，但幾乎每個 Angular 專家仍然在處理使用 AngularJS 中出現(xiàn)的各種各樣的問題。
目前，企業(yè)使用Web技術用在他們各自項目上，在線業(yè)務因此受到了極大影響。因此，有必要深入挖掘影響企業(yè)成長的各種因素。
但是，有可能不正確地使用 AngularJS 方法會影響你的應用程序在市場上的排名，因此 AngularJS 性能優(yōu)化成為每個AngularJS開發(fā)專家的重要需求。這就是為什么我們在這個博客中列出了九種提高 AngularJS 性能的方法的原因。
最近，巴西計算機科學家進行了一項調查，他們發(fā)現(xiàn)有關引起AngularJS程序員性能問題的原因的有趣事實。對于AngularJS在現(xiàn)實世界中的性能并沒有太多的信息。但是基于調查的研究為此提供了一些證據(jù)。
該調查得到下面結果：
45％的投票者表示是由于源代碼問題影響的性能。
只有 8％ 的投票者承認實際上做了改變。
一些受訪者指責 AngularJS 的架構。
其中有些則指責不必要的雙向綁定。
在對 AngularJS 性能進行了如此多的討論之后，現(xiàn)在可以看看九種可以改善 AngularJS 性能的方法了。
AngularJS 的性能可以簡單地通過它的 digest 周期測量。digest 周期可以被作為一個循環(huán)。在這個周期中，Angular 通過所有的 $scopes來檢查所有變量的改變。如果$scope.myVar 是定義在控制器（controller）中并且標記為觀察，那么 Angular 將會對myVar更新進行監(jiān)視，這種監(jiān)視每迭代循環(huán)一次就檢查一次。
1、用 Batarang 工具對 Watcher 進行基準測試
對于使用 Angular 的團隊來說， Batarang 是一個不錯的開發(fā)工具，它可以減少你在調試上的壓力。盡管可能有很多新特性，但它們主要還是來幫助你描述和追蹤你的 AngularJS 的性能。此外，它是通過監(jiān)控樹來決定哪個范圍不被銷毀的，例如，通過查看內存使用量是否有增加來決定是否銷毀。
2、使用 Native JavaScript 或 Lodash
Lodash 通過簡單地重寫一些基本邏輯，而不是依靠內置的 AngularJS 方法來提高應用程序性能。如果你的應用程序中沒有包含 Lodash，那么你可能需要重新編寫 Native JavaScript 中的所有代碼了。
3、用 Chrome 開發(fā)工具 Profiler 識別性能瓶頸
這是一個方便的工具，可讓你選擇要創(chuàng)建哪個配置文件類型。記錄分配時間點、獲取堆快照并記錄所分配的配置文件用于內存剖析。在這個性能優(yōu)化之后，你的應用程序將在不到兩秒鐘內完全呈現(xiàn)，用戶可以隨意與之進行交互。
4、盡量減少觀察者
AngularJS 完全圍繞在它的 digest cycle 中。每當觸發(fā) digest cycle 時，它將循環(huán)遍歷每個綁定以檢測模型變動。通過減少觀察者的數(shù)量，可以減少每個 digest cycle 中消耗的時間。它還可以減少應用程序的內存占用。
5、ng-if 比 ng-show 更佳
ng-show 指令在特定元素上切換 CSS 顯示屬性，而ng-if指令實際上從 DOM 中刪除元素，并在需要時重新創(chuàng)建它。此外， ng-switch 指令是 ng-if 的替代方案，它們具有相同的性能。
6、不要使用 ng-repeat
沒有使用 ng-repeat 指令就是應用程序的大勝利，因此建議避免使用 ng-repeat 并使用 JavaScript 構建 HTML。對于發(fā)聲的應用程序，使用 ng-if 導致增加不必要的觀察者。使用 ng-bind-html 指令是擺脫這個問題的更好的解決方案。
7、使用 $watchCollection (包含第三個參數(shù))
使用帶有兩個參數(shù)的 $watch 是好的 - 但是在使用 $watch(‘value',function(){},true)時帶有三個參數(shù)的 $watch，這使得 Angular 可以執(zhí)行深度檢查（以檢查對象的每個屬性）。 但代價可能是十分昂貴的。因此，為了解決這樣一個性能問題，Angular提供了 $watchCollection(‘value', function(){})指令，它與第三個參數(shù)幾乎相同，只是以低成本檢查對象屬性的第一層。
8、為了調試問題使用 console.time
如果你的應用正努力調試問題并影響了Angular 性能，就需要使用 console.time，這是一個很不錯的 API。
9、反綁定 ng-model
你可以反綁定輸入的 ng-model 。舉例來說，像谷歌那樣的反綁定搜索輸入，你必須使用 ng-model-options=”{debounce:250}”。這能讓其在 digest 周期內，至少每 250ms 就檢測一次觸發(fā)。
現(xiàn)在的開發(fā)時間是非常寶貴的，因此你需要一個像 AngularJS 這樣全面的框架來快速開展業(yè)務。
經過大量研究，我們收集了一些別的重要工作來提高 AngularJS 的性能。
下面有 4 個用于提升 AngularJS 性能的工具。
1、 Protractor
Protractor 是最強大的自動化端到端的 Angular 測試工具，由 Angular 團隊開發(fā)。Protractor 由一些偉大的技術組合而來，比如 NodeJS、Selenium]WebDriver、Mocha、Cucumber 和 Jasmine。
2、GulpJS
GulpJS 用于自動執(zhí)行重復性的任務，是流式的構建系統(tǒng)，可以使用 JSHint 或 ESLint 來檢查 JavaScript。
3、TestingWhiz
TestingWhiz 是最人性化的自動化測試工具之一，因為它擁有無代碼腳本的特性。TestingWhiz 提供了端到端測試方案用于測試 AngularJS 應用程序。它有各種測試命令可以輕松創(chuàng)建 AngularJS 相關的測試。TestingWhiz 有一個相對動態(tài)的等待命令，所以以同步不同服務器等待 AngularJS 組件的時間。
4、WebdriverIO
WebdriverIO 讓你只和行代碼就能控制瀏覽器或移動應用程序。你的測試代碼看起來會很簡單明了，易于閱讀。它的集成測試運行工具可以讓你以同步的方式編寫異步命令，這樣你就不必在意如何處理 Promise 以避免競爭條件。此外，它去掉了所有繁瑣的設置工作并且可以為你管理 Selenium 會話。
以上是“如何改善AngularJS性能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
