면접 준비하다가 브라우저 렌더링 과정 설명해보라는 질문을 봤는데 제대로 답을 못 하겠더라고요. 그냥 주소창에 치면 화면 뜨는 거라고만 생각했지 안에서 무슨 일이 일어나는지는 생각을 안 해봤어요.
대충 찾아보니까 DOM 만들고 CSSOM 만들고 이 둘을 합쳐서 렌더 트리 만들고 레이아웃, 페인트 뭐 이런 단어들이 나오던데 순서랑 각 단계에서 정확히 뭘 하는 건지가 머릿속에서 안 그려집니다.
특히 궁금한 게, DOM은 HTML 구조 그대로일 텐데 렌더 트리는 왜 또 따로 만드는 건가요? 그냥 DOM 보고 그리면 안 되나요? display none 같은 건 렌더 트리에서 빠진다는 얘기도 있던데 그거랑 관련이 있는 건지.
그리고 실무에서 자주 나오는 리플로우(reflow), 리페인트(repaint)라는 말도 이 과정 중 어디에 해당하는 건지 헷갈려요. 요소 위치 바꾸면 리플로우 일어나서 느리다 이런 얘기를 들었는데 그게 레이아웃 단계를 다시 도는 거라고 이해하면 되나요?
전체 흐름을 순서대로 좀 정리해주시면 감이 잡힐 것 같아요. 너무 깊게는 말고 개념 잡을 정도로만 부탁드립니다.