Хобрук: Ваш путь к мастерству в программировании

AngularJS улучшает производительность ng-repeat без нумерации страниц

Я получаю около 1000 записей из API. Я хочу показать в пользовательском интерфейсе без разбивки на страницы (в данный момент у нас есть другие проблемы). Я загружаю эти записи в html, используя ng-repeat. ng-repeat занимает много времени для рендеринга этой страницы. Я также использую «отслеживание по идентификатору».

Как я могу улучшить производительность ng-repeat? Каковы мои варианты?


  • Если вы выполняете какую-либо фильтрацию этих записей, избегайте фильтра на основе DOM (например, {{ amount | currency }}), который срабатывает при каждом дайджесте, и вместо этого выполняйте фильтрацию в своем контроллере с помощью службы $filter. Одноразовая привязка (например, {{::amount}}) также снижает нагрузку на часы. Кроме того, если вы еще этого не сделали, попробуйте отключить данные отладки для производственной версии ваше приложение. 12.09.2017

Ответы:


1

Если вы не собираетесь использовать нумерацию страниц, вам следует подумать об однократной привязке (см. раздел «Одноразовая привязка» в https://docs.angularjs.org/guide/expression), или, если это вам не подходит, вы можете попробовать https://github.com/kasperlewau/angular-bind-notifier

Однако рендеринг все равно займет некоторое время, поэтому вам следует рассмотреть возможность имитации бесконечной прокрутки с помощью фильтра limitTo и увеличения его значения по мере прокрутки вниз. Если вы хотите отобразить все 1000 элементов одновременно, это всегда будет медленно, независимо от того, насколько оптимизировано.

12.09.2017
  • Да, я использую :: одноразовую привязку. все еще я вижу ту же проблему. 12.09.2017
  • Новые материалы

    Понимание дженериков в TypeScript: подробное руководство
    Введение TypeScript, строго типизированный надмножество JavaScript, хорошо известен своей способностью улучшать масштабируемость, удобочитаемость и ремонтопригодность приложений. Одной из..

    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..

    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..

    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..