Angular 5 - Promise vs Observable - контекст производительности

Question

У меня есть угловой сайт, который получил данные от API REST, что-то вроде 1-4 запросов к API на каждой странице. и получается, что запросы иногда занимают много времени (а иногда нет).

Теперь все запросы выполняются в одной функции, используя Observable :

return this.http.post(url, {headers: this.header})
        .map(res => res.json())      
        .catch(this.handleError)

мой вопрос - может ли быть так, что медленный процесс происходит из-за использования в Observable? а может обещание будет лучше по производительности? или нет разницы между Observable и Promise в контексте производительности?

Answer 1

потому что вы меня заинтриговали. я создал такое же тестирование, которое выглядит так:

console.time('observable');
for(let i = 0; i < 10000; i++) {
  let user$ = of({
    name: 'yanis-git'
  });

  user$.subscribe(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('observable');

console.time('promise');
for(let i = 0; i < 10000; i++) {
  new Promise((resolve) => {
    resolve({
      name: 'promise'
    });
  }).then(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('promise');

и результат выглядит следующим образом (может отличаться в вашем браузере / настройке, но пропорция должна быть одинаковой:

observable: 34.060791015625ms
promise: 103.4609375ms

РЕДАКТИРОВАТЬ:

Другая реализация с обеими асинхронными характеристиками:

console.time('observable');
for(let i = 0; i < 10000; i++) {
  let user$ = Observable.create((o) => {
    setTimeout(() => {
      o.next({
        name: 'observable'
      });
    });
  });

  user$.subscribe(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('observable');

console.time('promise');
for(let i = 0; i < 10000; i++) {
  new Promise((resolve) => {
    setTimeout(() => resolve({
      name: 'promise'
    }))
  }).then(user => {
    // do something. Prefer not console.log because is ressource consuming.
  });
}
console.timeEnd('promise');

Результат близок, но раса выиграна наблюдаемым.

observable: 160.162353515625ms
promise: 213.40625ms

живой образец

если вы хотите проверить стек, пожалуйста, используйте реальную консоль браузера, чтобы увидеть вывод таймера