Nano Hash - криптовалюты, майнинг, программирование

Почему моя угловая сетка такая медленная?

Итак, я сделал некоторую пользовательскую директиву, которая рисует своего рода сетку данных на основе плавающих div (потому что вложенная реализация flex в FF отстой, но это не главное).

Как это устроено :

  • Я передаю некоторые данные в директиву через что-то вроде <the-grid data-list="parentController.displayedRows">

  • Внутри этой первой директивы у меня есть столбцы через что-то вроде <a-grid-column data-value="row.value"></a-grid-column> со многими атрибутами, которые я не буду здесь уточнять.

  • Значение data-value может быть прямым выражением, привязанным к строке, в которой контроллер директивы the-grid повторяет ng для отображения каждого столбца, или функцией, которую необходимо вычислить, чтобы отобразить предполагаемое значение из parentController.

  • В моем контроллере директивы <the-grid> у меня есть шаблон рендеринга моей сетки, который создает вложенный div ng-repeat (первый в строках сбора данных, второй в столбцах, созданных в директиве), это выглядит так:

    <div data-ng-repeat="row in list">
    <div data-ng-repeat="cell in theGridColumns"
         data-ng-bind-html="renderCell(row, cell)">
    </div>
</div>

  • У меня есть некоторая клавиатурная навигация, чтобы быстро выбрать строку или перемещаться по нумерации страниц или многим вкладкам, что делает не что иное, как применение некоторого класса к выбранной строке, в дополнение к обновлению некоторого «selectedRowIndex».

  • Я использую angular-vs-repeat, чтобы иметь минимум разделов строк в мой DOM (поскольку приложение работает на медленных компьютерах). Это хорошо работает.

Проблема в том, что каждый раз, когда я нажимаю клавишу «вверх» или «вниз» на клавиатуре, Angular «перерисовывает» КАЖДЫЕ ячейки списка.

Итак, предположим, у меня есть 200 строк в моем списке данных и 7 столбцов для каждой строки. Первая загрузка страницы, она проходит ~3000 раз в функции renderCell(). Хорошо, давайте примем это (не совсем понимаю, почему, но ладно).

Я нажал клавишу «вниз», чтобы перейти ко второй строке моего списка. Он проходит ~1100 раз в функции renderCell().

Так что да, результат очень медленный (представьте, если я нажму клавишу со стрелкой вниз, чтобы быстро перемещаться по своим строкам)... Я не могу этого принять. Если бы кто-нибудь мог объяснить это мне... Любая помощь будет принята с благодарностью :)

Если я делаю то же самое без директивы (прямая манипуляция DOM, со столбцами, сделанными вручную, а не в ng-repeat внутри ng-repeat), все будет гладко и чисто.

Да, я изучил каждую угловую сетку, представленную на рынке. Никто не удовлетворяет меня для моей цели, поэтому я решил создать свою собственную.

И нет, на данный момент я действительно не могу дать вам JSFiddle или что-то в этом роде. Все приложение действительно щупальце, изолировать его довольно сложно).

angularjs performance datagrid angularjs-directive angularjs-ng-repeat
22.04.2015

Ответы:


1

Попробуйте использовать привязку один раз (угловой 1.3+)

<div data-ng-repeat="row in ::list">
    <div data-ng-repeat="cell in ::theGridColumns"
         data-ng-bind-html="::(renderCell(row, cell))">
    </div>
</div>
22.04.2015
  • Хорошо, кажется, это значительно помогает. Я знал об односторонней привязке, но только к некоторому выражению {{ }}, не знал, что могу применить их к некоторым элементам или функциям ng-repeat. Следующий шаг — узнать, как обновить родительский список, если в него вносятся оперативные изменения. Я приму это как решение на данный момент. Большое спасибо ! 22.04.2015
  • Это больше похоже на взлом. У вас все еще есть что-то неправильное (нежелательное) в вашей директиве. 22.04.2015
  • Хорошо. Так что же может быть не так? Я не понимаю, почему это может быть неправильно. Разве моя реализация не проста? 22.04.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..