怎么提高AngularJS的性能

這篇文章主要介紹“怎么提高AngularJS的性能”，在日常操作中，相信很多人在怎么提高AngularJS的性能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么提高AngularJS的性能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

AngularJS是當今應用最廣泛的Web應用程序框架，并且它的受歡迎程序在其期待已久的AngularJS 4.0到來之后不斷上升。但是我們可以看到，幾乎所有的Angular專家仍然在努力解決與AngularJS性能相關的各種問題，盡管它自己也做了很多的優化。

今天，在線業務受網絡技術性能的影響很大。因此，有必要研究一下影響業務發展的所有因素。

不正確地使用AngularJS有可能會限制應用程序在市場上的表現，因此，AngularJS性能優化成為每個AngularJS開發專家的重要責任。這就是為什么我們要在這個博客中列出提高AngularJS性能的九種方法。

最近，巴西計算機科學家進行了一項調查，他們發現了導致性能問題的一些有趣的事實。這項調查并沒有提到有關AngularJS在現實世界中如何運行的太多的信息，但是基于這項調查的研究為此提供了一些證據。

調查結果如下：

• 有45％的人表示是源代碼的問題影響了性能。

• 只有8％的人承認對實際做了修改。

• 有些受訪者指責AngularJS的架構有問題。

• 其中有些人指責不必要的雙向綁定影響了性能。

在對AngularJS的性能進行了大量討論之后，現在是時候看看這九種可以提高AngularJS性能的方法了。

AngularJS的性能可以通過digest cycle測量出來。digest cycle可以認為是一個循環。在這個循環中，Angular將檢查所有的$scopes監視的每一個變量是否發生改變。如果$scope.myVar在控制器中定義并被標記為監視，則Angular將在每個循環中監視myVar是否發生改變。

Batarang是由Angular團隊推出的一個偉大的開發工具，它可以減輕你調試的工作量。它包含了許多新功能，其中一些功能可以幫助你描述和跟蹤AngularJS運行的性能。此外，在內存占用出現增長時，監視樹能夠確定哪些scope沒有被銷毀。

Lodash通過重寫一些基本邏輯來提高應用程序的性能，而不是依靠AngularJS內置方法。如果你的應用程序中沒有包含Lodash，那么你可能需要使用原生JavaScript來重寫所有內容。

這是一個很方便的工具，它可以讓你選擇要創建的概要的類型。它通過記錄內存分配時間線、內存分配概要和堆快照等手段來對內存進行分析。經過這一輪的性能優化之后，你的應用可以在兩秒鐘之內完全呈現出來，然后用戶就可以隨意與之交互了。

AngularJS完全是圍繞著digest cycle來運行的。每當digest cycle觸發時，它將循環遍歷每個綁定以檢測模型是否發生了改變。通過減少監視者的數量，可以減少每個digest cycle所花費的時間。 它還可以減少應用程序的內存占用。

ng-show指令在特定的元素上切換CSS顯示屬性，而ng-if指令實際上會先從DOM中刪除元素，如果在需要的話重新創建。此外，ng-switch指令是ng-if的替代方案，具有相同性能優勢。

建議避免在JavaScript中使用ng-repeat來構建HTML。對于某些應用程序來說，使用ng-repeat會增加不必要的監視者。使用ng-bind-html指令是解決這個問題的更好的辦法。

通常在使用$watch的時候只會用到兩個參數，但是如果加上第三個參數的話，例如`$watch('value',function(){},true)`，則可以讓Angular執行深度檢查（檢查對象的每個屬性）。但這可能會帶來更多的性能開銷。因此，為了解決這個性能問題，Angular提供了`$watchCollection('value', function(){})`，它的第三個參數的功能與$watch的幾乎相同，只是它只檢查對象屬性的第一層，以降低性能開銷。

如果你在對應用程序努力地進行調試，以解決性能問題的話，請使用console.time，這是一個非常棒的API。

你可以使用ng-model來去除輸入。例如，要撤銷像GOOGLE這樣的搜索輸入的話，你必須使用ng-model-options=”{debounce:250}”。由于輸入模型發生了變化，使得digest cycle每250ms觸發不超過一次。

用于開發的時間現在非常寶貴，因此你需要一個像AngularJS這樣的功能全面的框架來快速開展業務。

在研究了很多東西之后，我們收集整理了其他一些重要的工具可以用來增強AngularJS的性能。

下面看一下這四個AngularJS性能增強工具。

Protractor是由Angular團隊開發的最強大的端到端Angular自動測試工具。Protractor融合了很多偉大的技術，如NodeJS、Selenium、webDriver、Mocha、Cucumber和Jasmine。

GulpJS可用于自動執行重復任務、流媒體構建系統，以及使用JSHint或ESLint檢查JavaScript腳本。

TestingWhiz是一款用戶友好的自動化測試工具，因為它具有無代碼腳本功能。 TestingWhiz提供了端到端的測試解決方案來對AngularJS應用程序進行測試。它具有多種測試命令，可以很輕松地創建與AngularJS相關的測試。

WebdriverIO可以讓你只需通過幾行代碼就能控制瀏覽器或移動應用程序。它的測試代碼簡單明了、易于閱讀。 集成測試運行器允許你以同步的方式編寫異步命令，這樣，你就無需關心如何來避免競爭狀態。此外，它消除了所有繁瑣的設置工作，并為你管理Selenium會話。

正如我們所看到的，由于在Web開發中引入了很多新的JavaScript框架，Web開發的發展速度非常得快。為了從這些框架中獲得最大的收益，你必須定期進行性能優化。

AngularJS是最強大的Web應用構建框架之一。通過提升AngularJS的性能，開發人員可以用更少的代碼來做更多的事情。即便是編寫出“意大利面條式代碼”的風險也大大降低。  

到此，關于“怎么提高AngularJS的性能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！