[CS] 브라우저의 역할에 대한 나름의 이해

브라우저의 중요한 역할 중 하나는 화면에 웹페이지를 그리는 것이다 그 과정은 다음과 같다
Html 파싱 -> DOM -> CSSOM(css를 만나면) -> render tree 생성 -> layout -> print
Html을 파싱해서 dom 이라는 트리 구조를 만든다 그 과정에서 css를 만나게 되면 cssom 트리 구조를 만든다 이후 이 생성된 dom과 cssom을 이용해 render tree를 만든다 render tree는 실제로 화면에 보이는 요소들이다 따라서 display None으로 된 것은 render tree에 없다 이후 이 화면에 보이는 요소들을 화면에 배치시키는 layout 과정을 거친 후 paint를 하게 된다

Reference

---

https://m.post.naver.com/viewer/postView.nhn?volumeNo=8431285&memberNo=34176766

브라우저는 웹페이지를 어떻게 그리나요? - Critical Rendering Path

http://d2.naver.com/helloworld/59361
https://www.youtube.com/watch?v=RVnARGhhs9w