Как оптимизировать рендеринг компонентов в Ember JS

Question

В компоненте обертки представлено около трехсот компонентов, и он занимает много времени для рендеринга. Но мне нужно тысяча компонентов для визуализации внутри контейнера-контейнера. Как я могу добиться этого без каких-либо проблем с производительностью при визуализации компонентов Image shows the rendering time taken by 300 components which is too much

Answer 1

Если у вас есть свиток и все ваши компоненты не в viewport в то же время, вы можете использовать Proxy Pattern.

Углеродный аддон под названием ember-in-viewport, чтобы определить, находится ли ваш компонент в окне просмотра или нет. Используя его, вы можете реализовать прокси-шаблон.

Адрес sample twiddle. На application.hbs, если вы используете my-proxy-component вместо my-component, рендеринг страницы будет почти в 3 раза быстрее.

Answer 2

Эти советы своего рода Hacky, но может помочь:

Вы можете ленивой нагрузки некоторые компоненты, как, например, загружать наиболее важные из них, а затем загрузить остальные меняющийся вычисляемый свойство после фиксированного времени ожидания на didRender (во время незанятого состояния).

Например:

onDidRender: Ember.on('didRender', function() { 
    Ember.run.later(() => { 
     this.set('displayLazyItems', true); 
    }, 2000); 
}) 

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

Запишите временную шкалу и убедитесь, что производительность на самом деле происходит из времени рендеринга, иногда это фактически выполнение javascript или загрузка, которая испортилась.

Наконец, ember 2.10 включает в себя мерцание 2, этот новый механизм рендеринга может оптимизировать время рендеринга до 50%, вы можете захотеть его использовать.