Приложение AngularJS зависает при загрузке новых данных в $ scope

Question

Возможно, это трудный вопрос для ответа, так как я не уверен, что проблема с корнем здесь, было бы полезно, если бы кто-то посмотрел.

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 загружаемых в объем.

Я понимаю, что, возможно, это просто факт, что загрузка во всех этих данных занимает большую нагрузку на странице - каждый 27 загруженных предметов (один звонок из бесконечного цикла) GET) общий вес загружаемых данных составляет около 30 КБ поп, поэтому около 300 предметов - около 900 КБ данных. Эти данные как можно меньше (~ 500 строк JSON).

Возникает вопрос:

Есть ли какие-либо рекомендации, плагины, директивы или практики, лучше всего использовать для AngularJS для при загрузке большого объема данных на странице $scope?

Для уточнения, приложение построено на Node/ExpressJS/MongoDB

EDIT: Я проверил эту проблему на двух компьютерах (как на OSX) и этот вопрос НАМНОГО более распространены в Chrome, чем в Сафари. Chrome полностью пошатнулся при загрузке данных, Safari действительно гладкая и имеет только заметное отставание, когда вы получаете более 600 предметов, и даже тогда это не так плохо, как Chrome.

Answer 1

Я взглянул на страницу с AngularJS Batarang, и не кажется, что ваше приложение проводит много времени в цикле дайджеста. Если вы посмотрите на «Timeline» панели в Chrome в периоды отставания пользовательского интерфейса, вы можете увидеть следующее:

(full size)

Большую часть времени тратится на много «Разбор HTML «. Быстрый поиск Google показал this Stack Overflow question, в котором есть некоторые ответы, которые могут быть полезны; в частности, сообщения групп о ручной конкатенации строк, стоит попробовать здесь. Вы также можете попробовать разбить большой блок HTML-анализов на более мелкие куски, добавив новые элементы в область действия небольшими партиями (возможно, используя $evalAsync или несколько таймеров), чтобы узнать, помогает ли это.