각도/각도브라우저 탭이 백그라운드일 때 JS 업그레이드 앱이 응답하지 않음

각도/각도브라우저 탭이 백그라운드일 때 JS 업그레이드 앱이 응답하지 않음

각/각도가 있습니다.JS Upgrade App 현재 Angular에서 모든 것을 마이그레이션하는 중입니다.JS에서 각도로.꽤 큰 규모의 프로젝트이기 때문에 당연히 업그레이드를 진행해야 합니다.

@uirouter/angular-hybrid를 사용하며 루트 상태가 여전히 AngularJS(내비게이션 등)이고 하위 보기입니다.이 하위 보기에서는 모든 구성 요소를 Angular로 천천히 업그레이드하고 있습니다.성능상의 이유로 업그레이드 모듈(Upgrade Module) 대신 다운그레이드 모듈(https://angular.io/guide/upgrade-performance) 을 사용해야 했습니다.

UI 구성요소의 경우 Angular Material 2를 사용합니다.

설정은 여기까지, 이제 질문/문제로 넘어가겠습니다.

페이지가 있는 탭이 배경에 있고 나중에 페이지로 돌아오면(최소 5분에서 10분) 전체 페이지가 지연되고 응답하지 않습니다.자리를 비우고 탭이 배경에 있을수록 지연 시간이 길어집니다.

이미 시도/발견한 내용:

• 이벤트가 등록된 것처럼 보이지만 탭이 백그라운드이기 때문에 실행되지 않고 탭으로 돌아가면 모두 동시에 실행됩니다.여기 프로파일링의 스크린샷이 있습니다
• 각도 변화 감지 제거 및 사용ngZone: 'noop'효과가 없음
• 모든 애니메이션을 비활성화해도 효과가 없습니다.
• Angular production mode를 활성화하면 약간의 개선이 이루어졌지만(착시일 수도 있음) 문제는 여전히 남아 있습니다.
• Chrome에서 개발하는데 다른 브라우저(예: Firefox, Safari)에서도 문제가 발생합니다.
• 라우터 뷰 구성 요소가 Angular 구성 요소인 경우에만 발생합니다.JS 뷰 구성 요소는 영향을 받지 않는 것 같습니다.

저는 현재 문제를 재현하기 위해 깨끗한 샘플 앱을 작업 중이며 추가 테스트를 위한 몇 가지 맥락을 가지고 있습니다.곧 추가하겠습니다.

Lib 버전

각도: 6.1.0

AngularJS: 1.7.2

zone.js: 0.8.26

@uirouter/angular- hybrid: 6.0.0

업데이트 (2019년 8월)

현재 Lib 버전 Angular 8, AngularJS 1.7.8 & uirouter/hybrid 8에서 여전히 발생하고 있습니다.

이 구현 패턴을 모든 ng2 컴포넌트에 사용해 보십시오.

https://angular.io/api/core/ChangeDetectorRef#detach-change-detector-to-limit-how-often-check-occurs

이 개념은 angularjs에 의해 구성 요소가 업데이트되거나 렌더링되는 것을 제거한다는 것입니다.

설명서에서:

class DataListProvider {
  // in a real application the returned data will be different every time
  get data() { return [1, 2, 3, 4, 5]; }
}

@Component({
  selector: 'giant-list',
  template: `
      <li *ngFor="let d of dataProvider.data">Data {{d}}</li>
    `,
})
class GiantList {
  constructor(private ref: ChangeDetectorRef, private dataProvider: DataListProvider) {
    ref.detach();
    setInterval(() => { this.ref.detectChanges(); }, 5000);
  }
}

@Component({
  selector: 'app',
  providers: [DataListProvider],
  template: `
      <giant-list><giant-list>
    `,
})
class App {
}

기본적으로 구성 요소를 분리한 다음 수동으로 변경 사항을 탐지합니다.

각 탭 로드에서 서비스를 폐기한 다음 새 변경 내용을 듣기 위해 새 이벤트를 만들어 봅니다.

또한 이 방법은 효과가 있을지 모르지만 README @ https://github.com/ui-router/angular-hybrid#limitations 을 고려하면 해결할 수 있는 방법입니다.

README의 이 섹션은 다운그레이드가 원활한 옵션이 아님을 시사할 수 있습니다.

제한 사항:

현재 Angular(2+) 또는 AngularJS(1.x) 구성 요소를 AngularJS(1.x) ui-view로 라우팅할 수 있습니다.그러나 Angular JS(1.x) 구성 요소를 Angular(2+) ui-view로 라우팅하는 것은 지원하지 않습니다.

Angular(2+) ui-view를 생성하는 경우 중첩된 ui-view도 Angular(2+)여야 합니다.

이 때문에 앱은 리프 상태/뷰에서 시작하여 루트 상태/뷰로 이동해야 합니다.

UrlHandling Strategy를 조사해보셨습니까?Angular 위에 Angular를 사용할 수 있었습니다.JS가 쌓이고 필요할 때 천천히 다시 씁니다.

저희가 했던 일은 Angular와 Angular 둘 다 사용했습니다.UrlHandling Strategy를 사용하여 Angular에서 처리할 경로를 결정하고 Angular에서 처리하지 않을 경우 Angular로 이동합니다.JS 루트.

당신의 설정을 살펴보지 않고 추측만 할 수 있습니다.어쩌면 그 길이 항상 왔다 갔다 하기 때문일지도

언급URL : https://stackoverflow.com/questions/51560138/angular-angularjs-upgrade-app-unresponsive-when-browser-tab-in-background