유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

프로그래머 면접 질문: 브라우저 렌더링 과정을 설명하시오!

ZeroCho TV

2024. 10. 3.

0

#frontend
  • 브라우저는 HTML을 받아 레이아웃을 생성하고, CSS를 처리하여 CSS OM을 만듭니다. 🎨
  • 스크립트 태그가 발견되면 렌더링이 일시 중단되어, 최종 위치에 태그를 삽입하거나 동기화 핸들러를 사용해야 합니다. 🤝
  • 레이아웃 단계는 요소 크기를 계산하고 화면에 배치하고, 페인트 단계는 요소의 색상이나 테두리 모양을 채워 화면에 그립니다. 🖌️
  • JavaScript를 사용하면 화면을 자주 조작하기 때문에 repaint, reflow가 발생할 수 있습니다. 🌪️
  • reflow는 요소 위치를 계산하여 성능에 부정적인 영향을 미칠 수 있으므로 최적화 관점에서 reflow를 줄이고 repaint에 초점을 맞추는 것이 중요합니다. 📈

Recommanded Videos