브라우저 렌더링 과정 / skeleton UI / DOMContentLoad

브라우저 렌더링 엔진의 동작 과정

1. DOM 트리 구축

• 브라우저가 HTML을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 HTML 태그를 DOM 노드로 변환한다.

2. 렌더 트리(Render Tree) 구축

• 외부 CSS 파일과 inline style 요소를 파싱하고, DOM + CSSOM = 렌더 트리가 생성된다.
• 렌더 트리 : 색상, 면적 등 시각적 속성을 포함. 정해진 순서대로 화면에 표시된다.

3. 레이아웃(Layout) 또는 리플로우(Reflow)

• 렌더 트리 배치
• 각 요소들의 위치와 크기를 계산하여 화면의 정확한 위치에 표시되도록 한다.

4. 페인트(Paint) 또는 그리기

• UI 백엔드에서 렌더 트리의 요소를 화면에 실제 픽셀로 그려낸다.

Skeleton UI

필요성

• 사용자 이탈률을 줄일 수 있고, 브라우저 렌더링 시 레이아웃을 다시 그리는 것을 막아준다.

• CLS (누적 레이아웃 이동)
  ➡ 갑자기 레이아웃이 이동되어 사용자가 예상치 못한 동작을 하는 경우 (ex. 취소 눌렀는데 주문 성공..)

  

CLI 발생 이유

• 크기가 정해지지 않은 이미지, 광고, 임베드
• 동적으로 주입된 콘텐츠
• FOIT/FOUT를 유발하는 웹 글꼴
• DOM을 업데이트하기 전에 네트워크 응답을 대기하는 작업
• 개발 환경과 프로덕션 환경이 동일하게 작동하지 않는다.
  • 개발 환경에서는 테스트 이미지가 이미 개발자의 브라우저 캐시에 존재하고, 로컬에서의 api 호출이 너무 빨라 지연이 눈에 띄지 않는 경우가 많음
• 해결 : 링크 참조

DOMContentLoaded 이벤트

• document 객체에서 발생
• 브라우저가 DOM요소들을 다 읽었을때 (DOM 트리 구축 이후)

document.addEventListener("DOMContentLoaded", renderNews);

load 이벤트

• HTML로 dom 트리를 만드는게 완성되었을 뿐 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 (렌더 트리 구축 이후)

활용 예시

• DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때

• load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음

• beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때

• unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때
  
  

🔗 Reference

• 재그지그님 블로그
• NAVER D2
• 누적 레이아웃 이동
• 모던 자바스크립트 튜토리얼