AngularJS uygulaması, yeni veriyi $ kapsamına yüklerken donuyor

Question

Bu, muhtemelen kök sorununun ne olduğundan emin olmadığımdan emin olmak için zor bir sorudur. sürekli aşağı kaydırarak

http://threadfinder.net/search%3FnameTags=jacket/0

, daha fazla öğe ngInfiniteScroll ve bu işlevi kullanarak yüklenir:

$scope.moreProducts = function() { 
     if ($scope.busy || $scope.noMore){return;} 
     else 
     if (!($scope.busy)) { 
      $scope.busy = true; 
      $scope.itemsLoaded += 27; 
      var theQuery = $routeParams.query.replace(/\?|%3f/gi, ''); 
      $scope.itemSearch.get({ 
       query: theQuery, 
       page: $scope.itemsLoaded 
      }, function(data) { 
       if (data.posts.length <= 0) { 
        $scope.noMore = true; 
       } else { 
        $scope.noMore = false; 
        for (var i = 0; i < data.posts.length; i++) { 
         if ($scope.user) { 
          if (!($scope.user.likes.indexOf(data.posts[i]._id) === -1)) { 
           data.posts[i].liked = 'http://i.imgur.com/CcqoATE.png'; 
          } else { 
           data.posts[i].liked = 'http://i.imgur.com/tEf77In.png'; 
          } 
          $scope.posts.push(data.posts[i]); 
         } 
        } 
        $scope.busy = false; 
       } 
      }); 
     } 
    } 

(ı kiremit düzeni için AngularJS Deckgrid kullanıyorum ama devre dışı denedim o ve performansta büyük bir değişiklik yoktur.)

Kaydırmaya devam ederseniz, sayfa performansına yüklenen ~ 300 öğeye ulaştıktan sonra bir isabet almaya başlar ve yeni öğeler b ise uygulama donar. eing kapsam içine yüklendi.

Belki de tüm bu veriyi yüklemenin sayfadaki büyük bir yükü alması sadece bir gerçektir - yüklü olan her 27 öğe (bir infiniteScroll GET çağrısı) ile yüklenen verilerin toplam ağırlığı yaklaşık 30 kb'dir. Bir pop, yani yaklaşık 300 öğede var ~ 900kb veri kapsamı. Bu veri, yapabileceğim kadar az (~ 500 satır JSON).

soru şudur:

sayfa $scope içinde çok veri yüklerken için angularjs için herhangi tavsiyeler, eklentileri, direktifler ya da en iyi kullanım uygulamaları var mıdır? Ben iki bilgisayar (OSX'te ikisi) bu sorunu teslim ettik ve bu konunun daha Chrome'da FAZLA daha yaygındır:

açıklama için uygulama Node/ExpressJS/MongoDB

EDIT üzerine kuruludur Safari'de. Chrome, verileri yüklerken tamamen başarılıdır, Safari gerçekten pürüzsüzdür ve 600'den fazla öğeye ulaştığınızda ve Chrome'un hiç de yakınında bir yere sahip olmadığınızda yalnızca dikkate değer bir gecikme yaşanır.

Answer 1

AngularJS Batarang numaralı sayfaya bir göz attım ve uygulamanızın sindirim döngüsünde çok fazla zaman harcadığını görünmüyor. Çoğu zaman

(full size)

Ayrıştırma HTML" bir sürü harcanmaktadır: Eğer UI lag olduğu dönemlerde Chrome'un "Timeline" panelinde bir göz atın, aşağıdaki görebilirsiniz ." Hızlı bir Google araması, yararlı olabilecek bazı yanıtları olan this Stack Overflow question'u buldu. Özellikle, Gruplar, manuel dizgi birleştirme hakkında burada denemeye değer. Ayrıca, küçük yığınlar halinde yeni öğeler ekleyerek (belki de $evalAsync veya birkaç zamanlayıcı kullanarak), HTML parçalarının büyük bloğunu daha küçük parçalara ayırmaya çalışmayı düşünebilirsiniz.