Angular 공부 ( real-time-chart )

함수 호출 방식을 이용한 d3 real-time-chart

1. tick 함수 호출을 통한 path 구현
2. 단일 그래프 interval 방식과 tick 함수 호출 방식 비교
3. 차이 발생 원인

 

tick 함수 호출을 통한 path 구현

참조: 블로그

 

• lineCarht .on(“start”, tick)을 통해서 tick() 함수 호출
• 다음 코드를 통해 새로운 데이터 기입
•  
• 다음 코드를 통해 기본 변환 행렬 초기화
•  
• 다음 코드를 통해 변환 행렬 설정
•  
• tick 함수 내부의 this는 함수 자신을 나타내어 this 바인딩의 대상 전환

 

 

단일 그래프 interval 방식과 tick 함수 호출 방식 비교

• interval 동작 원리
  • 그래프 생성
  • interval 40초 마다
  • 그래프 재 작성
  • 반복
• tick 동작 원리
  • 그래프 생성
  • tick함수 호출
  • duration 40초 대기
  • tick함수 재 호출
  • 반복

 

• 동일 개체 그래프 그리기 비교
   

위 : interval, 아래 : tick 함수

• 동시에 시작했음에도 tick함수가 더 늦게 동작을 시작함단일 개체 CPU사용량 비교

• interval

 

• 평균적으로 안정적인 5%대 사용량
• tick함수

• 평균적으로 6%에 가까운 사용량

 

차이 발생 원인

참조 : 블로그

• angular 앱 성능 최적화를 위한 14가지 방법

1. Production 모드 활성화
2. AOT(Ahead Of Time)
3. Minification
4. 뷰에서 함수 호출 getter 피하기
5. 순수 파이프
6. 지연 로딩 모듈(Lazy loading modules)
7. 코드 분할
8. OnPush 변화 감지
9. 비동기 파이프
10. ngDoCheck
11. 함수별 트래킹
12. Zone.js
13. observable 구독 취소
14. Web workers

 

• tick함수의 경우 지속적인 getter 함수 호출로 인한 차이 발생을 원인으로 보고 있음

 

 

참조:

https://codelib.tistory.com/17

12 Real-Time Transition

https://dev.grapecity.co.kr/bbs/board.php?bo_table=Insight&wr_id=2&sca=IT%EF%BC%86%EA%B0%9C%EB%B0%9C+%EC%A0%95%EB%B3%B4&page=1 

Angular 앱 성능 최적화를 위한 14가지 방법 > 시티즌 인사이트 | 그레이프시티 개발자 포럼