무한스크롤

• 기술적으로 매끄럽게 구현하는 건 불가능
• 주어진 돔을 재활용..? 해야함
• 과거의 데이터는 사라지게.. 그냥 바꿔치게...
• 스크롤도 구현해버림..;;;

React Rendering

• setState -> rendering -> mount(실제 DOM 구성)
• mount -> 실제 돔에 추가하는 것
• reconciliation -> 최적화
• DOM 접근을 최소화, 최소한의 DOM Node만 프로그램적으로 변경하기 위한 과정
• previous tree vs new tree 비교 알고리즘 (reconciliation)
• lists 경우는 key 정보를 힌트로 비교
• reconiliation 과정을 거친 이후에, Rendering 과정에서 실제 DOM에 변경된 정보를 생성하게 됨
• JS는 최적화 기법으로 객체 탐색비용을 절약 (lnline cache, Shape 등)

Reconciler - Fiber

• Fiber는 내부 프로젝트 이름
• 렌더링 하는 동안 엄청 오래걸림
• 자바스크립트는 싱글스레드니까..
• 싱글스레드에서 스택을 점유하지 않기 위해 청크 단위로 작업을 나눔
• 이걸 다 비동기로 처리함. 작업의 우선순위를 조정함
• requestIdealTime 시간을 활용해서 Frame의 자투리 시간에 진행

Web worker

• 복잡한 연산을 구현할 때 멀티스레드처럼 되면 좋음
• 메인 스레드가 아닌 다른 스레드에서 동작할 수 있게 할 수 있음

웹사이트 체감 속도

• 첫 페이지 왜이렇게 느림?
  - Core Web Vitals
  - First Contentful Paint
  - Lagest Contentful Paint
  - Time to Interactive
• 왜 이렇게 늦게 반응함?
• 왜 이렇게 끊김?

개선하기

• 첫 페이지 로딩을 빠르게 하기
• 훌륭한 반응
• 부드럽게 이어져보이기

최적화하기

• 진단 > 개선 > 테스트 > 진단

• lighthouse

• performance, memory (누수는 없나?)

• 가로로 길면 병목임

첫 페이지 로딩 지연 해결

• HTML parsing 방해하지 말기
  - script 위치 조정
  - defer/async 속성

  • dom content loaded 이벤트 사용하기

• build를 통한 코드 최적화 (압축, 파일 합치기)
  - 파일 합치기
  - 난독화 (Obfuscation)

  • dev랑 build 폴더 비교하기

• Lazy loading
  - lazy component loading (Dynamic JS Loading)

  • src를 넣는 시점을 느리게 하면.. 된다! img는 돔에 이미 올라가 있고~
  • createScript로 뒤늦게 추가하기

• HTTP Header 속성 활용
  - Cache-control(max-age, no-cache, no-store)

  • Expires (캐시 만료 시간)
  • last-modified / if-Modified-Since(마지막 갱신 시간)

• 메인쓰레드를 블록킹하지 않기 위한 최소한의 조치들
  - reflow를 줄이기 위한 노력

  • composite 단계만 동작하도록 GPU 가속 속성 사용
    • 3D Transform(transalte3d)
      • vedio/canvas element
      • transform/opacity 속성의 CSS 기반 애니메이션 구현
      • will-change 속성 사용

• webRTC, webgl

• svg는 주로 그래프를 만들때 사용함

• service worker (PWA과 연관, MSW 가 서비스 워커로 만들어져 있음. 프록시임)

HTTP 변천사

• HTTP 1.0 과 2.0 의 차이점은 스트림을 동시에 전송한다는 것의 차이

TCP 한계

• 3 way or 4 way handshake 과정 떄문에 추가적인 오버헤드가 발생함
• 데이터의 신뢰성을 위해 어쩔 수 없음
• UDP로 보내면 신뢰성을 보장하지 못함. 이건 음성통화, 실시간 채팅 등에서나. 데이터 손실 감안하고 쓰는거.

HTTP 3

• UDP의 단순하고 낮은 오버헤드의 장점을 살리자
• QUIC을 만듦
• TCP를 탈출, 핸드쉐이크 과정 생략. 엄청 빠름
• 모바일 같은 경우 4G, 5G 로 바뀌는데 망을 전환할 때 매우 빠름
• 모바일 위해 만들어짐

기타 최적화

• Code-splitting
• React.lazy 사용해야 함
• Suspense와 함께 사용해야함