Day6 브라우저 렌더링, CSS Translate, will change - otw7917/oig GitHub Wiki

scrollLeft vs transform: translateX()

먼저 브라우저 렌더링 과정 HTML 파싱 -> DOM 생성 이때 CSS 또는 <style> 등을 만나면 비동기로 요청 및 파싱 시작 CSS 파싱해서 -> CSSOM 을 생성 이때 중요한 점 CSSOM이 완성되어야 렌더트리를 만들수 있음.

Render Tree 생성되면 -> Layout 과정 시작 -> Paint -> Composite

Layout 과정

  • Render Tree에 정의된 노드에 대해 위치와 크기를 계산
  • 박스 모델 기준 top/left, width, height 결정

Paint

  • 각 노들를 화면 픽셀로 변환(색상, 그림자, "그리기")

Composite

  • 각 레이어들을 GPU가 합성하여 최종 프레임 만듦.

✅ transform 프로퍼티는 layout, paint(초기 1회 제외) 과정을 넘겨서 Composite 과정에서 GPU 캐시 비트맵만 이동. -> 메인스레드 부하 낮음!!

will-change: transform

✅ 에니메이션이 훨씬 부드럽게 사용가능하게 해줌. ✅ 같은 의미로 Composite 단계에서 수행하도록 도와주기 때문에 최적화에 유용

브라우저 렌더링 과 관련해서 Layout(Reflow) 와 RePaint는 항상 얘기가 나오는거 같으니 기억해두자!

  • DOM 구조나 요소의 크기, 위치 변화가 되면 Layout이 일어나고 -> Repaint가 일어난다.

    • 너비를 바꾼다거나, 마진을 추가로 준다거나, innerText =" dfkjlsajfkasdl " 같이 콘텐츠 길이가 길어지면 layout 계산이 필요로 하기때문.

  • Repaint의 경우 color가 바뀌거나, shadow 속성이 달라진다거나 화면을 다시는 그리는 과정

정리

  • 인터렉션의 경우 크게 신경쓰지 않을수 있지만 앞으로 AI Interface에서는 이런 화면이나 소리같은 피드백이 더욱 많아질거 같으므로 브라우저 렌더링⭐️ 같이 중요한 원리를 계속 공부하자!
⚠️ **GitHub.com Fallback** ⚠️