怎么提高AngularJS的性能

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

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

今天，在線業(yè)務(wù)受網(wǎng)絡(luò)技術(shù)性能的影響很大。因此，有必要研究一下影響業(yè)務(wù)發(fā)展的所有因素。

不正確地使用AngularJS有可能會(huì)限制應(yīng)用程序在市場(chǎng)上的表現(xiàn)，因此，AngularJS性能優(yōu)化成為每個(gè)AngularJS開發(fā)專家的重要責(zé)任。這就是為什么我們要在這個(gè)博客中列出提高AngularJS性能的九種方法。

最近，巴西計(jì)算機(jī)科學(xué)家進(jìn)行了一項(xiàng)調(diào)查，他們發(fā)現(xiàn)了導(dǎo)致性能問題的一些有趣的事實(shí)。這項(xiàng)調(diào)查并沒有提到有關(guān)AngularJS在現(xiàn)實(shí)世界中如何運(yùn)行的太多的信息，但是基于這項(xiàng)調(diào)查的研究為此提供了一些證據(jù)。

調(diào)查結(jié)果如下：

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

• 只有8％的人承認(rèn)對(duì)實(shí)際做了修改。

• 有些受訪者指責(zé)AngularJS的架構(gòu)有問題。

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

在對(duì)AngularJS的性能進(jìn)行了大量討論之后，現(xiàn)在是時(shí)候看看這九種可以提高AngularJS性能的方法了。

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

Batarang是由Angular團(tuán)隊(duì)推出的一個(gè)偉大的開發(fā)工具，它可以減輕你調(diào)試的工作量。它包含了許多新功能，其中一些功能可以幫助你描述和跟蹤AngularJS運(yùn)行的性能。此外，在內(nèi)存占用出現(xiàn)增長(zhǎng)時(shí)，監(jiān)視樹能夠確定哪些scope沒有被銷毀。

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

這是一個(gè)很方便的工具，它可以讓你選擇要?jiǎng)?chuàng)建的概要的類型。它通過記錄內(nèi)存分配時(shí)間線、內(nèi)存分配概要和堆快照等手段來對(duì)內(nèi)存進(jìn)行分析。經(jīng)過這一輪的性能優(yōu)化之后，你的應(yīng)用可以在兩秒鐘之內(nèi)完全呈現(xiàn)出來，然后用戶就可以隨意與之交互了。

AngularJS完全是圍繞著digest cycle來運(yùn)行的。每當(dāng)digest cycle觸發(fā)時(shí)，它將循環(huán)遍歷每個(gè)綁定以檢測(cè)模型是否發(fā)生了改變。通過減少監(jiān)視者的數(shù)量，可以減少每個(gè)digest cycle所花費(fèi)的時(shí)間。 它還可以減少應(yīng)用程序的內(nèi)存占用。

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

建議避免在JavaScript中使用ng-repeat來構(gòu)建HTML。對(duì)于某些應(yīng)用程序來說，使用ng-repeat會(huì)增加不必要的監(jiān)視者。使用ng-bind-html指令是解決這個(gè)問題的更好的辦法。

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

如果你在對(duì)應(yīng)用程序努力地進(jìn)行調(diào)試，以解決性能問題的話，請(qǐng)使用console.time，這是一個(gè)非常棒的API。

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

用于開發(fā)的時(shí)間現(xiàn)在非常寶貴，因此你需要一個(gè)像AngularJS這樣的功能全面的框架來快速開展業(yè)務(wù)。

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

下面看一下這四個(gè)AngularJS性能增強(qiáng)工具。

Protractor是由Angular團(tuán)隊(duì)開發(fā)的最強(qiáng)大的端到端Angular自動(dòng)測(cè)試工具。Protractor融合了很多偉大的技術(shù)，如NodeJS、Selenium、webDriver、Mocha、Cucumber和Jasmine。

GulpJS可用于自動(dòng)執(zhí)行重復(fù)任務(wù)、流媒體構(gòu)建系統(tǒng)，以及使用JSHint或ESLint檢查JavaScript腳本。

TestingWhiz是一款用戶友好的自動(dòng)化測(cè)試工具，因?yàn)樗哂袩o代碼腳本功能。 TestingWhiz提供了端到端的測(cè)試解決方案來對(duì)AngularJS應(yīng)用程序進(jìn)行測(cè)試。它具有多種測(cè)試命令，可以很輕松地創(chuàng)建與AngularJS相關(guān)的測(cè)試。

WebdriverIO可以讓你只需通過幾行代碼就能控制瀏覽器或移動(dòng)應(yīng)用程序。它的測(cè)試代碼簡(jiǎn)單明了、易于閱讀。 集成測(cè)試運(yùn)行器允許你以同步的方式編寫異步命令，這樣，你就無需關(guān)心如何來避免競(jìng)爭(zhēng)狀態(tài)。此外，它消除了所有繁瑣的設(shè)置工作，并為你管理Selenium會(huì)話。

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

AngularJS是最強(qiáng)大的Web應(yīng)用構(gòu)建框架之一。通過提升AngularJS的性能，開發(fā)人員可以用更少的代碼來做更多的事情。即便是編寫出“意大利面條式代碼”的風(fēng)險(xiǎn)也大大降低。  

到此，關(guān)于“怎么提高AngularJS的性能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！