9種改善AngularJS性能的方法

2019-11-19 14:49:54

字體：大中小

供稿：網(wǎng)友

AngularJS 是目前使用非常廣泛的 web app 應(yīng)用框架，隨著它的受歡迎程度持續(xù)上升，期待已久的AngularJS 4.0 誕生了。盡管已經(jīng)做了很多優(yōu)化，但幾乎每個(gè) Angular 專(zhuān)家仍然在處理使用 AngularJS 中出現(xiàn)的各種各樣的問(wèn)題。

目前，企業(yè)使用Web技術(shù)用在他們各自項(xiàng)目上，在線(xiàn)業(yè)務(wù)因此受到了極大影響。因此，有必要深入挖掘影響企業(yè)成長(zhǎng)的各種因素。

但是，有可能不正確地使用 AngularJS 方法會(huì)影響你的應(yīng)用程序在市場(chǎng)上的排名，因此 AngularJS 性能優(yōu)化成為每個(gè)AngularJS開(kāi)發(fā)專(zhuān)家的重要需求。這就是為什么我們?cè)谶@個(gè)博客中列出了九種提高 AngularJS 性能的方法的原因。

最近，巴西計(jì)算機(jī)科學(xué)家進(jìn)行了一項(xiàng)調(diào)查，他們發(fā)現(xiàn)有關(guān)引起AngularJS程序員性能問(wèn)題的原因的有趣事實(shí)。對(duì)于AngularJS在現(xiàn)實(shí)世界中的性能并沒(méi)有太多的信息。但是基于調(diào)查的研究為此提供了一些證據(jù)。

該調(diào)查得到下面結(jié)果：

45％的投票者表示是由于源代碼問(wèn)題影響的性能。

只有 8％的投票者承認(rèn)實(shí)際上做了改變。

一些受訪(fǎng)者指責(zé) AngularJS 的架構(gòu)。

其中有些則指責(zé)不必要的雙向綁定。

在對(duì) AngularJS 性能進(jìn)行了如此多的討論之后，現(xiàn)在可以看看九種可以改善 AngularJS 性能的方法了。

AngularJS 的性能可以簡(jiǎn)單地通過(guò)它的 digest 周期測(cè)量。digest 周期可以被作為一個(gè)循環(huán)。在這個(gè)周期中，Angular 通過(guò)所有的 $scopes來(lái)檢查所有變量的改變。如果$scope.myVar 是定義在控制器（controller）中并且標(biāo)記為觀察，那么 Angular 將會(huì)對(duì)myVar更新進(jìn)行監(jiān)視，這種監(jiān)視每迭代循環(huán)一次就檢查一次。

1、用 Batarang 工具對(duì) Watcher 進(jìn)行基準(zhǔn)測(cè)試

對(duì)于使用 Angular 的團(tuán)隊(duì)來(lái)說(shuō)， Batarang 是一個(gè)不錯(cuò)的開(kāi)發(fā)工具，它可以減少你在調(diào)試上的壓力。盡管可能有很多新特性，但它們主要還是來(lái)幫助你描述和追蹤你的 AngularJS 的性能。此外，它是通過(guò)監(jiān)控樹(shù)來(lái)決定哪個(gè)范圍不被銷(xiāo)毀的，例如，通過(guò)查看內(nèi)存使用量是否有增加來(lái)決定是否銷(xiāo)毀。

2、使用 Native JavaScript 或 Lodash

Lodash 通過(guò)簡(jiǎn)單地重寫(xiě)一些基本邏輯，而不是依靠?jī)?nèi)置的 AngularJS 方法來(lái)提高應(yīng)用程序性能。如果你的應(yīng)用程序中沒(méi)有包含 Lodash，那么你可能需要重新編寫(xiě) Native JavaScript 中的所有代碼了。

3、用 Chrome 開(kāi)發(fā)工具 Profiler 識(shí)別性能瓶頸

這是一個(gè)方便的工具，可讓你選擇要?jiǎng)?chuàng)建哪個(gè)配置文件類(lèi)型。記錄分配時(shí)間點(diǎn)、獲取堆快照并記錄所分配的配置文件用于內(nèi)存剖析。在這個(gè)性能優(yōu)化之后，你的應(yīng)用程序?qū)⒃诓坏絻擅腌妰?nèi)完全呈現(xiàn)，用戶(hù)可以隨意與之進(jìn)行交互。

4、盡量減少觀察者

AngularJS 完全圍繞在它的 digest cycle 中。每當(dāng)觸發(fā) digest cycle 時(shí)，它將循環(huán)遍歷每個(gè)綁定以檢測(cè)模型變動(dòng)。通過(guò)減少觀察者的數(shù)量，可以減少每個(gè) digest cycle 中消耗的時(shí)間。它還可以減少應(yīng)用程序的內(nèi)存占用。

5、ng-if 比 ng-show 更佳

ng-show 指令在特定元素上切換 CSS 顯示屬性，而ng-if指令實(shí)際上從 DOM 中刪除元素，并在需要時(shí)重新創(chuàng)建它。此外， ng-switch 指令是 ng-if 的替代方案，它們具有相同的性能。

6、不要使用 ng-repeat

沒(méi)有使用 ng-repeat 指令就是應(yīng)用程序的最大勝利，因此建議避免使用 ng-repeat 并使用 JavaScript 構(gòu)建 HTML。對(duì)于發(fā)聲的應(yīng)用程序，使用 ng-if 導(dǎo)致增加不必要的觀察者。使用 ng-bind-html 指令是擺脫這個(gè)問(wèn)題的更好的解決方案。

7、使用 $watchCollection (包含第三個(gè)參數(shù))

使用帶有兩個(gè)參數(shù)的 $watch 是好的 - 但是在使用 $watch(‘value',function(){},true)時(shí)帶有三個(gè)參數(shù)的 $watch，這使得 Angular 可以執(zhí)行深度檢查（以檢查對(duì)象的每個(gè)屬性）。但代價(jià)可能是十分昂貴的。因此，為了解決這樣一個(gè)性能問(wèn)題，Angular提供了 $watchCollection(‘value', function(){})指令，它與第三個(gè)參數(shù)幾乎相同，只是以低成本檢查對(duì)象屬性的第一層。

8、為了調(diào)試問(wèn)題使用 console.time

如果你的應(yīng)用正努力調(diào)試問(wèn)題并影響了Angular 性能，就需要使用 console.time，這是一個(gè)很不錯(cuò)的 API。

9、反綁定 ng-model

你可以反綁定輸入的 ng-model 。舉例來(lái)說(shuō)，像谷歌那樣的反綁定搜索輸入，你必須使用 ng-model-options=”{debounce:250}”。這能讓其在 digest 周期內(nèi)，至少每 250ms 就檢測(cè)一次觸發(fā)。

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

經(jīng)過(guò)大量研究，我們收集了一些別的重要工作來(lái)提高 AngularJS 的性能。

下面有 4 個(gè)用于提升 AngularJS 性能的工具。

1、 Protractor

Protractor 是最強(qiáng)大的自動(dòng)化端到端的 Angular 測(cè)試工具，由 Angular 團(tuán)隊(duì)開(kāi)發(fā)。Protractor 由一些偉大的技術(shù)組合而來(lái)，比如 NodeJS、Selenium]WebDriver、Mocha、Cucumber 和 Jasmine。

2、GulpJS

GulpJS 用于自動(dòng)執(zhí)行重復(fù)性的任務(wù)，是流式的構(gòu)建系統(tǒng)，可以使用 JSHint 或 ESLint 來(lái)檢查 JavaScript。

3、TestingWhiz

TestingWhiz 是最人性化的自動(dòng)化測(cè)試工具之一，因?yàn)樗鼡碛袩o(wú)代碼腳本的特性。TestingWhiz 提供了端到端測(cè)試方案用于測(cè)試 AngularJS 應(yīng)用程序。它有各種測(cè)試命令可以輕松創(chuàng)建 AngularJS 相關(guān)的測(cè)試。TestingWhiz 有一個(gè)相對(duì)動(dòng)態(tài)的等待命令，所以以同步不同服務(wù)器等待 AngularJS 組件的時(shí)間。

4、WebdriverIO

WebdriverIO 讓你只和行代碼就能控制瀏覽器或移動(dòng)應(yīng)用程序。你的測(cè)試代碼看起來(lái)會(huì)很簡(jiǎn)單明了，易于閱讀。它的集成測(cè)試運(yùn)行工具可以讓你以同步的方式編寫(xiě)異步命令，這樣你就不必在意如何處理 Promise 以避免競(jìng)爭(zhēng)條件。此外，它去掉了所有繁瑣的設(shè)置工作并且可以為你管理 Selenium 會(huì)話(huà)。