pile·
프론트엔드·github-engGitHub Engineering·

diff 라인 성능 개선을 위한 험난한 여정

문제대형 Pull Request의 Files changed 탭에서 DOM 노드와 React 컴포넌트가 폭증해 INP와 메모리 사용이 악화됐다.
접근diff line 컴포넌트 트리를 단순화하고 이벤트 핸들러를 상위로 모았다. Map 기반 O(1) 조회, TanStack Virtual, 선택적 hydration도 적용했다.
결과10,000라인 비교에서 렌더 컴포넌트 74% 감소, 메모리 약 50% 감소, INP는 약 450ms에서 100ms로 개선됐다.
github-eng
GitHub Engineering 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·여기어때 (GC컴퍼니)여기어때 (GC컴퍼니)·

    항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다

    여기어때 항공 서비스 프론트엔드가 웹과 앱 웹뷰 두 환경에서 동일한 함수 호출로 동작하는 앱 브릿지 추상화 레이어를 설계한 과정을 다룬다. iOS·안드로이드 규약 차이와 "웹에 존재하지 않는 브릿지를 어떻게 호출하나"라는 문제를 단일 추상화 층으로 해결한 구현 사례다.

    요약 이어보기
    #react#typescript#webview+2