raw-view 모듈 조회 캐싱으로 FCP/LCP 최적화

개발
5

lookupView-patch

이제 Array 대신 Map을 통해 구현되었습니다.

개발 인스턴스에서 lookupView에 소요되는 애플리케이션 부팅 시간:

  • 패치 적용 전: 124 ms
    Firefox Profiler (lookupView로 필터링된 콜스택)

  • 패치 적용 후: 9 ms
    Firefox Profiler (lookupView로 필터링된 콜스택)

절약된 시간: 약 115 ms

이는 개발 인스턴스에서 appendOutletView 내부에 소요되는 시간을 1.083 ms에서 946 ms로 줄여줍니다.

원시 handlebar 헬퍼에 대한 패치

네, 실제로는 한 가지 변경 사항이 있는 복사-붙여넣기입니다: isPath에 대한 저렴한(저비용) 검사를 사용합니다.

      // replaces @ember/-internals/utils isPath
      // @see: https://github.com/emberjs/ember.js/blob/3537670c14883346e11e841fcb71333384fcbc87/packages/%40ember/-internals/metal/lib/path_cache.ts#L5-L7
      // @see: https://github.com/emberjs/ember.js/blob/255a0dd3c7de1187f4a2f61a97cf78bfff8f66a8/packages/%40ember/-internals/glimmer/lib/utils/bindings.ts#L70
      let isPath = context.indexOf('.') > -1;

예를 들어 renderTopicListItem은 궁극적으로 _getPath의 많은 호출을 트리거합니다(또 다른 50-100 ms를 절약할 수 있음):
Firefox Profiler (renderTopicListItem 내부의 _getPath로 필터링된 콜스택)

아마도 비용이 많이 드는 _getPath 호출은 Discourse가 아니라 Ember.js에서 최적화해야 할 사항일 수 있습니다.

JavaScript 실행에 대한 내부 정보를 얻으려면 Firefox Profiler를 확인해 보세요: