我有一個帶分頁網格的AngularJS應用程序（兩個嵌套的ng-repeat）。一頁有大約25x40的輸入元素。在發佈1000次綁定的開始時，分頁性能可以接受。如何加速AngularJS應用程序？

但是，頁面的複雜度增長：動態類，變化的上下文菜單，網格的每個單元的條件內容。估計有6000個綁定（每個輸入元素有6個），分頁變得不穩定。

我的問題是：我通常如何處理AngularJS中的性能問題？明顯的第一步是衡量。但Chrome Profiler的結果並沒有告訴我那麼多，遠不知如何繼續。

Self  Total       Function 
----------------------------------------------------------------- 
24 ms 2.79 s angular.js:7997   Scope.$digest 
1 ms  1 ms controllers.js:365  setViewportData 
16 ms  692 ms angular.js:13968  ngRepeatWatch 
8 ms  22 ms angular.js:6439   extend.literal 
9 ms 1.22 s angular.js:14268  ngSwitchWatchAction 
16 ms  45 ms angular.js:12436  ngModelWatch 
0  621 ms angular-ui-4.0.js:264 initDateWidget 
0   13 ms angular.js:12859  ngClassWatchAction 
0   70 ms angular.js:14184  ngStyleWatchAction 
1 ms  5 ms angular-ui-4.0.js:261 getOptions 
0   16 ms angular.js:579   copy 
0   1 ms angular.js:4558   interpolateFnWatchAction 
1 ms  2 ms angular.js:5981   token.fn.extend.assign 
0   37 ms angular.js:8151   Scope.$eval 
1 ms  1 ms angular.js:6137   extend.constant 
14 ms  16 ms angular.js:651   equals 
1 ms  1 ms angular.js:4939   $interpolate.fn

旁白：有沒有可能是「Object.observe（）」將在未來加快東西（忽略「initDateWidget」，這顯然是一個不同的主題）？

來源

2013-03-26 woelling

我曾在這裏這個問題，以幫助人們加快NG2應用提高性能一般，它應該能爲您提供一些見解：https：//開頭計算器。 com/questions/42583421/how-to-compress-and-optimize-an-angular2-application – HappyCoder 2017-07-06 11:35:49

你可以做的事情將最快加速你的Angular應用程序是減少那些綁定，你可以。做到這一點的一種方法是創建一個指令，使用DOM操作爲您創建表格，而不是使用ng-repeats。這將減少您必須處理的整體手錶數量，並使該消化速度快得多。

我知道這樣做很醜陋，但Angular並非真正意義上要設置3000+個綁定。既然它做了一個摘要，它不是一個觀察者模式，它確實減慢了許多設置的東西。

你甚至可以做一個混合的方法，你仍然使用ng-repeat，但所有的值都放在DOM中，通過一個自定義指令直接進行DOM操作，從而避免了所有的綁定。

來源

2013-03-26 17:39:18

如果您還沒有這樣做，請安裝AngularJS Chrome的插件，Batarang，這將幫助你找出其中你綁定的是你造成的悲傷。 https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

至於對方的回答表明，你要找什麼是可能在模型綁定到的子集你在屏幕上顯示無限滾動設置爲你的表的一個小案例。

的NG-網格組件實現這一點，可能是值得考慮的要麼直接使用或竊取的技術。 http://angular-ui.github.com/ng-grid/

來源

2013-03-29 21:35:12

多麼棒的工具！謝謝，謝謝，謝謝！這應該安裝在每臺開發人員計算機上;-) – Sebastian 2014-01-04 12:56:27

不錯的工具，但它仍然表明ngModelWatch佔用了總時間的91.9％，所以真正的準確定位很困難，也許我以錯誤的方式使用它 – Highmastdon 2014-10-14 09:19:45

有點晚，但也許這對你的作品：

https://github.com/Pasvaz/bindonce

您可以使用它在這些綁定是註定不會改變，因此$消化將不會處理它們了。

來源

2013-07-11 10:31:00

資源

This post about angularJS performance on large lists有你有選擇性能調優很好的概述。

以上答案（除Batarang插件）也提到以內。這只是該文中提示的概述。

減少數據與limitTo（分頁）

一個比較明顯的解決方案是通過減少您的視圖中的項目數量，減少綁定的量。數據的分頁可以通過ng-repeat上的limitTo過濾器完成。

例在How to improve performance of ngRepeat over a huge dataset (angular.js)?那篇文章也a jsbin example聯繫。

另外，還要確保不使用數據，因爲這提供了一個內聯方法每$摘要進行評估。

<li ng-repeat="item in filteredItems()"> // Bad idea, since very often evaluated. 
<li ng-repeat="item in items"> // Way to go!

與bindonce

另一個明顯的解決方案是對特定元素刪除綁定刪除綁定。當然，這意味着更新將不再反映在視圖中。

bindonce解決方案不僅僅是去除2路綁定。基本上它會在綁定被移除之前等待綁定的值。最好爲自己閱讀。詳情請查詢the bindonce project。

在上面列出的文章中還有關於使用2個列表的模式的信息。一個用於可視化，另一個用作數據源。

使用NG網

Ng-grid的優點是，它只是使當前可見的元素。閱讀更多在http://angular-ui.github.io/ng-grid/。

類似ng-if完全從DOM樹中移除隱藏的元素，而ng-show只能將它們保留在原位但隱藏。考慮到ng-if會在再次顯示時放置原件的副本（原件是鑰匙，而不是更改）。

過濾提示

該文章還有一些很好的過濾列表提示。

喜歡使用ng-show隱藏因爲這種方式不具有子列表的數據的要創建的過濾元件。

而另一種稱爲「去抖用戶輸入」的技術。最後一個選項是等待過濾，直到用戶停止輸入。包括a jsfiddle example。

更多提示可以在鏈接的文章中找到。這裏列出的資源也應該是一個很好的起點。我相信這裏列出了最明顯的特點和快速勝利。

另一篇精闢論述是How does data binding work in AngularJS?

來源

2014-02-12 11:34:03 hcpl

在1.3角，更可以通過使用::無需綁定，一旦使用其他3方JS

<li ng-repeat="item in :: items">

這是一件好事，如果項目不會改變所以你可以綁定他們一次

來源

2014-11-23 09:03:04 yonia

限制手錶的數量往往會很長。下面是有效降低手錶

http://www.syntaxsuccess.com/viewarticle/547a8ba2c26c307c614c715e

來源

2015-02-05 22:06:34 TGH

我所遇到的性能問題的數量，當聽衆的數量在數據網格組件exceded 1000+的技術總結。

我解決了這個問題，使用一個使用react.js構建我的視圖的指令。該指令暴露了更新函數。

每當數據改變（在控制器中）時，更新函數觸發指令，然後react.js引擎高效地執行渲染。

我知道在角度項目中使用第二個主要框架是一個很大的開銷，這不是真正的數據綁定魔法。但其工作速度更快。

最終我停止使用angular.js並移動到react.js + FLUX。我認爲它更好，但我知道它不容易從角度轉移，但它的價值。

Angular directive that uses react.js

來源

2015-04-02 13:23:25

我有性能問題NG-電網大數據，它是由與Angular Grid替換它解決。該網站上的演示顯示，它可以輕鬆管理100,000行。

來源

2015-04-03 22:54:55 Ceolter

我已經爲此摔了幾周。我發現兩件事情有很大的不同：

（i）一次綁定：在你可以的地方使用一次性綁定; （ii）DEBOUNCE：對於我不需要立即傳播的輸入，但可以等待250ms，設置去抖設置。這對我的大型ng-repeat表格造成了不可思議的差異。我不能強調反彈設置的有效性。（請參閱：https://docs.angularjs.org/api/ng/directive/ngModelOptions）

來源

2015-04-04 19:22:41 Soferio

bject.observe（）是一種用於將真正的數據綁定到瀏覽器的建議機制。它暴露了觀察對象和數組變化的機制，並通知其他對這些對象進行的變化。

<!DOCTYPE html> 
<html> 
<head> 
<base target="_blank"> 
<title>Object.observe()</title> 

<link rel="stylesheet" href="../css/main.css" /> 

</head> 

<body> 

<div id="container"> 

    <h1><a href="https://shailendrapathakbits.wordpress.com/" title="code_lab_by_shail ">code_lab_by_shail</a> Object.observe()</h1> 

    <p>An object <code>o</code> is created and <code>Object.observe()</code> is called on it.</p> 

    <p>Three changes are made to <code>o</code> and <code>Object.observe()</code> records these changes as shown below.</p> 

    <p>Use the console to find out what happens if you make further changes to <code>o</code>: it's defined in global scope.</p> 

    <p>Call <code>Object.unobserve(o, observer)</code> to stop observing changes.</p> 

    <p id="data" style="font-size: 14px;"></p> 

    <script src="js/main.js"></script> 

    <a href="https://github.com/shailendra9/objectobserver/blob/master/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a> 

</div> 

<script src="../js/lib/ga.js"></script> 

</body> 
</html>

來源

2015-08-18 05:48:20

您還可以通過Disabling Debug Data

來源

2017-10-20 11:32:32 jabko87

如何加速AngularJS應用程序？

回答

資源

減少數據與limitTo（分頁）

與bindonce

使用NG網

過濾提示

更多

相關問題