불행히도 저는 이 큰 속도 향상을 재현하지 못했습니다. Firefox와 Chrome(macOS)에서 측정 가능한 개선 사항을 관찰하지 못했습니다. Chrome은 renderTopicListItem에 약 23ms를 소모하고, Firefox는 30ms를 소모합니다. 구형 안드로이드 기기(Pixel 3)에서는 약 108ms를 확인했습니다. 변경 사항 전후로 숫자가 변하지 않는 것 같습니다.
참고로, 저는 performance API를 사용하여 이러한 수치를 측정했습니다. renderTopicListItem의 시작 부분에 performance.mark("rtli-start")를 추가하고, 끝에 performance.measure("rtli", "rtli-start")를 추가했습니다.
그 다음 브라우저 플러그인을 비활성화하고 개발자 도구를 닫은 상태로 브라우저를 새로고침합니다(개발자 도구와 브라우저 플러그인은 렌더링 성능에 상당한 영향을 미칠 수 있습니다). 로딩이 완료된 후 개발자 도구를 열고 다음 코드를 실행하여 측정값을 합산합니다:
performance.getEntriesByName("rtli").reduce((v, m) => v + m.duration, 0);
이 변경 사항은 분명히 더 나은 구현 방식이므로 반드시 병합할 것입니다. 하지만 렌더링 성능에 눈에 띄는 차이를 가져다줄지는 확실하지 않습니다 