Как избежать Ember от замораживания при визуализации DOM

Question

Я вижу, что моя навигационная система и другие компоненты замерзают (не реагируют на события наведения/клика) в течение нескольких секунд .. после того, как модель для определенного маршрута была выбрана. что-то такое встретилось?

Возможно, это из-за визуализации DOM ... Любая идея, как я могу избежать этого?

То же самое происходит, когда я загружаю больше деталей и добавить его в DOM ..

Я на ember-cli@0.1.15 с Ember версии 1.8.1

Answer 1

Javascript может замерзнуть, когда Эмбер является рендеринг сложных шаблонов или когда Ember Data получает массивные дампы данных. Это замораживание, присущее JS, однопоточное и не может быть разрешено, но его можно избежать, оптимизируя ваш код!

Как оптимизировать шаблоны:

1. Первый анализ с помощью вкладки Производительность в Ember Inspector. Ищите компоненты, которые занимают больше всего времени, чтобы их перенести и решить. В качестве альтернативы используйте Perforator, расширение Chrome, которое покажет вам время рендеринга для каждого вида/компонента.

2. Используйте Ember.run.next(), чтобы разложить большие операции в следующие циклы. Это очень похоже на setTimeout(), но с интеграцией Ember.

3. Заменить:{{link-to 'route'}} с <button {{action 'openRoute'}}>. Для рендеринга link-to требуется более высокая производительность, чем простой HTML с эффектом Ember. Сделал огромную разницу с нашим проектом, потому что у нас было сотни на одной странице.

4. Избегайте повторного рендеринга, когда это возможно. Например: вместо сортировки списка путем сортировки массива объектов, а затем рендеринга их снова с помощью {{#each}}, используйте CSS3 flex для сортировки. Это не требует JS и, таким образом, не замерзает.

5. Держите Ember актуальным. Механизм рендеринга Ember (Glimmer) постоянно улучшается.

6. Используйте web workers, чтобы сделать ваш HTML в фоновом режиме (тихий продвинутый).

Как оптимизировать большие данные:

1. Рассмотрим нагрузки модели отношений асинхронно вместо того, чтобы включить их.
2. Загрузите только данные, указанные пользователю (с разбивкой на страницы).
3. Сократить данные, отправленные.

Дополнительные предложения приветствуются!

Answer 2

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

model() { 
    console.time("modelStart"); 
    var data = this.store.query(...; 
    data.then(() => console.timeEnd("modelStart"); 
    return data; 
} 

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