💡새롭게 알게 된 것
브라우저 렌더링
1. HTML파일 다운로드
2. 파싱
다운 받은 HTML파일을 DOM, CSSOM 트리 구조로 해석, 노드객체 생성한다.
3. 스타일
DOM 트리, CSSOM 트리가 합쳐진 렌더트리 구성한다.
(최종적으로 브라우저에 표시될 것들)
visibility: hidden 와 달리 display: none는 요소가 보이지 않고 차지하는 공간도 없기 때문에 렌더트리에서 제외된다.
4. 레이아웃
각 노드들의 정확한 위치와 크기를 계산, 루트노드부터 순회하며 계산된 결과를 픽셀값으로 렌더트리에 반영한다.
5. 페인트
렌더트리에 있는 각 노드들을 화면상의 실제 픽셀로 변환하는 단계. 크기, 위치와 관계없는 CSS 속성 (색상, 투명도)등을 페인트 단계에서 적용한다. ( ≈ Photoshop Layer)
6. 합성 & 렌더
실제 화면에 컨텐츠를 그리는 마지막 단계.
- `Reflow보단 Repaint만 발생하는 CSS 속성을 사용하는 것이 권장된다.
DOM
💭느낀점
어제 오늘 시간이 어떻게 지나갔는지 모르겠다..😿 아직 남은 기간이 긴 만큼 컨디션 조절을 잘해야겠다.
처음으로 해쉬테이블을 이용한 코딩관련 문제를 푸는데 매우 어려웠다. 그래도 론 멘토님과 강의를 해주신 선협멘토님께서 어떤 식으로 함수를 짜고, 문제를 어떻게 분석해야할 지 다양하고 자세한 조언을 얻을 수 있어 너무 감사했다! :)
기초가 튼튼한 개발자로 성장하기 💻 🤞