當將新數據加載到$ scope時，AngularJS應用程序會凍結

這可能是一個難以回答的問題，因爲我不確定這裏存在什麼根本問題，如果有人願意看看，這將很感激。

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

如果你不斷地向下滾動，更多的項目被裝載在使用ngInfiniteScroll這個功能：

$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; 
       } 
      }); 
     } 
    }

（我使用AngularJS Deckgrid的瓷磚佈局，但我已經試過禁用它和性能沒有什麼大的變化。）

如果你繼續滾動，在達到300個加載到頁面上的項目後，性能開始下降並且應用程序凍結，而新項目是b eing加載到範圍內。

我明白，也許這只是一個事實，加載所有這些數據在頁面上承受很大的負載 - 每加載27個項目（一個無限滾動GET調用）被加載數據的總重量約爲30kb一個流行音樂，所以在300個左右的範圍內有〜900kb的數據。這些數據儘可能少（約500行JSON）。

的問題是：

是否有任何建議，插件，指令或最佳使用實踐AngularJS在$scope頁面加載大量數據時？

爲了澄清，應用是建立在Node/ExpressJS/MongoDB

編輯：我已經簽出這個問題在兩臺計算機上（無論在OSX）這問題是MUCH更加普遍在Chrome比在Safari中。 Chrome在加載數據時完全錯亂，Safari非常流暢，只有在達到600多種商品時纔有明顯的滯後，即使這樣也遠不如Chrome那麼糟糕。

來源

2013-12-08 Jascination

我看了一下AngularJS Batarang的頁面，看起來你的應用程序在摘要循環中花費了很多時間。如果您在UI滯後的時間來看看Chrome的「時間軸」面板中，你可以看到如下：

Timeline

(full size)

大部分時間都在大量的「解析HTML是花「。谷歌搜索快速翻開this Stack Overflow question，它有一些可能有用的答案;特別是小組發佈關於手動字符串連接，值得在這裏嘗試。您也可以考慮嘗試通過向小範圍內添加新項目（可能使用$evalAsync或幾個定時器）來將大塊HTML解析爲更小的塊，以查看是否有幫助。

來源

2013-12-08 07:47:26

有趣。關於如何在元素加載到頁面後關閉數據綁定的任何想法？沒有搜索過濾器，並且ng-repeat中每個項目只有一到兩個位需要監視綁定數據更改（只是每個項目底部的圖標加上顯示'喜歡'）。不知道從哪裏開始，但認爲這可能是一個巨大的性能助推器。 – Jascination

@Jascination你可以看看[鏈接後的'setRepeat'指令]（https：//gist.github。com/btm1/6746150），但我不確定這是否是您的表演命中的來源。我們正在做一些非常相似的事情，也使用ngInfiniteScroll，並且在添加DOM時略有延遲，但沒有像您所看到的那麼嚴重;當我們向示波器添加數據時，我也沒有看到很多「解析HTML」事件。 –

當將新數據加載到$ scope時，AngularJS應用程序會凍結

回答

相關問題