왜 (...)하지 않습니다에서는 setTimeout ()는 내 응용 프로그램의 랙이를 만들지 만, Rxjs 타이머 (). 가입합니까?

고급 문제 :

나는이 100ms의 간격 구성 요소, 즉 "게으른로드"어떤 의견을 가지고있다.

내가에서는 setTimeout을 사용하면, 정말 랙이있다.

구성 요소

<div *ngFor="let post of posts">
   <app-post [post]="post" ></app-post>
</div>

이것은 내 응용 프로그램 랙이을 (평균 14, 유휴 시간 51100ms을 FPS)한다 :

while(this.postService.hasPosts()){
  setTimeout(()=> {
   this.posts.push(this.postService.next(10));
  },100);
}

내 응용 프로그램이 원활이 메이크업 (평균 FPS (35), 유휴 시간 40800ms)

while(this.postService.hasPosts()){
  timer(100).subscribe(()=> {
    this.posts.push(this.postService.next(10));
  });
}

rxjs 타이머가, 훨씬 더 그 작동 왜 어떤 explaination가 있나요?

나는 파이어 폭스와 런타임 분석했다. 첫번째 예에서, 프레임 레이트가 다른 실시 예에서 14 FPS 35 FPS로 떨어진다.

심지어 대기 시간이 20 % 낮다.

이 방법은 (평균 FPS (45), 유휴 시간 13500ms)도 부드럽고입니다 :

interval(100).pipe(takeWhile(this.postService.hasPosts()).subscribe(()=> {
    this.posts.push(this.postService.next(10));
  });
}

최대 K :

귀하의 마지막 해결책은 오직 올바른입니다.

당신이 직장에 예상처럼 다른 두 솔루션은 작동하지 않을 수 있습니다. 실제로, 이것은 무한 반복 될 것이다.

이는 자바 스크립트의 방법이다 eventloop가 작동합니다. 다음 그림 (이미지에서 찍은 자바 스크립트 실행의 모델을 보여줍니다 여기에 ) :

우리의 관련 부분이있는 stack과를 queue. 자바 스크립트 런타임은에 메시지를 처리 queue. 각 메시지는 메시지가 처리 될 때 호출되는 함수와 연관된다.

스택은 각 함수 호출 함수 인수 및 로컬 변수를 포함하는 스택 프레임을 생성한다. 함수는 다른 함수를 호출하는 경우 새로운 프레임이 스택의 상부에 가압된다. 함수가 반환하면 상단 프레임은 스택의 튀어된다.

스택이 비어있는 경우 이제 자바 스크립트 런타임은에 다음 메시지 처리합니다 queue(가장 오래된).

당신이 사용하는 경우 setTimeout(() => doSomething(),100)는 doSomething()기능은 100 밀리 초 후 대기열에 추가됩니다. 이는 100 밀리 초는 보장 된 시간이 아니라 최소한의 시간이 아닌 이유입니다. 따라서 당신의 doSomething method스택이 비어 있고 다른 아무것도 큐에없는 경우에만 호출됩니다.

당신이 while 루프에서 반복하는을하고 당신의 상태가 당신의 내부 코드에 따라 달라집니다하지만 setTimeout스택이 비어 있으므로 귀하받지 않습니다 때문에, 당신은 무한 루프를 생성 한 this.posts.push(this.postService.next(10));코드가 호출되지 않습니다.

RxJS 구현의 경우에도 마찬가지입니다. 그들은 핸들 타이밍에 스케줄러를 사용합니다. 이 RxJS 다른 내부 스케줄러 구현이 있지만, 우리의 구현에 볼 수 interval및 timer우리는 스케줄러를 지정하지 않은 경우, 기본 하나는 asyncScheduler이다. asyncScheduler 일정의 작업과 setInterval어떤처럼 작동 setTimeout위에서 언급 한 큐에 다른 메시지를 푸시합니다.

나는 While 루프와 두 개의 솔루션을 시도하고 두 번째 슈퍼 랙이는 동안 실제로 첫 번째는 완전히 브라우저를 동결 할 수도 있지만 While 루프의 콘솔 내부에 출력 뭔가. 나는 두 번째는 조금 더 성능이 좋은 이유 실제로 모르겠지만, 그럼에도 불구하고 모두 당신이 실제로 원하는 것을하지 않습니다. 당신은 이미 좋은 솔루션 와서 나는이 대답은 첫 번째 솔루션은 그렇게 나쁘지 수행하는 이유를 이해하는 데 도움이 될 수 있기를 바랍니다.

왜 (...)하지 않습니다에서는 setTimeout ()는 내 응용 프로그램의 랙이를 만들지 만, Rxjs 타이머 (). 가입합니까?

추천