페이지 로딩 시간이 길어지는 현상에 대하여

[vulcan9]

증상

미디어 재생 컴포넌트를 페이지에 삽입했더니 페이지가 뜨는 시간이 늘어났음.

테스트

방법

• 8개의 오디오 재생 컴포넌트를 페이지에 삽입한 후 비교 테스트함.

  경과

• 연결된 미디어의 preload 옵션 영향으로 예측했으나 미디어 소스를 뺀 상태에서 별 차이가 발견되지 않음.
• 퍼포먼스 테스트 결과 angular watch 스크립트 처리 로직에서 많은 시간이 소요된다는 점을 발견함.

watch 로직	watch 로직 제거
시간 지연 차이
자세한 정보

이벤트 발생까지 걸리는 시간

이벤트	watch 로직	watch 로직 제거
DOMContentLoaded	569ms	619ms
load	6.11s	2.21s

페이지는 뷰어에서 IFrame에서 로드되고, 뷰어는 load 이벤트를 받고서야 페이지를 보여줌(show). 따라서 위 표에서 load 이벤트까지 걸리는 시간이 중요함

해결 방법

뷰어 수정 방법

뷰어에서 DOMContentLoaded 이벤트 시점부터 페이지를 보여주도록 하는 것은 뷰어에서 페이지를 초기화 하는 로직을 보다 디테일하게 검토해 봐야함. (단순히 이벤트만 바꿔서 적용해본 결과 정상적으로 페이지 표시가 되지 않았음)

Angular Watch 로직 수정 방법

• Angular Watch 로직은 AngularJS 핵심 로직임. 가장 많이 사용되지만 초기부터 퍼포먼스에 대한 우려가 있었음.
• 그래서 개발자들은 퍼포먼스를 고려하여 최대한 자제하여 사용하고 있음.
• 직지 저작툴에서는 페이지 랜더링에 최대한 자제하여 사용하더라도 그 사용 수량은 결국 사용자의 최종 결과물에 의해 결정됨.
• 이런 문제를 보완하기 위해 AngularJS (v1.7.x)에서 추가한 component 기능이 있음 (angular 로직을 훼손하지 않으면서 watch를 줄이는 방법)
• 페이지 랜더링쪽(결과물) 로직에만 적용해도 됨.
• 수정해야하는 코드양이 많음

[vulcan9]

0.14.0 버전(이상)에서 처리(구현) 되었습니다.

Jik-ji_0.14.0

• angularJS 버전 업데이트 (v1.7.8)
• 랜더링 성능 향상
  • render 모듈의 directive를 모두 component 구조로 포팅
  • 이벤트 타이밍 조정
  • style 설정에 align(정렬) API 추가