📝DOM CSSOM 렌더링 과정(브라우저는 어떻게 동작하는가?)

🔍 브라우저의 구조

• 사용자 인터페이스

  뒤로가기, 앞으로가기, 새로고침 등등 웹 브라우저의 상단바를 칭한다.(url이 변경돼도 바뀌지 않는다.)
  
  

• 렌더링 엔진

  웹사이트를 그리는(렌더) 엔진이다.(렌더 = 그리다)
  웹사이트를 보여주는 부분이 렌더링 엔진이다.
  

• 브라우저 엔진

  사용자 인터페이스와 렌더링 엔진 사이에 가교역할
  ex) 사용자 인터페이스에서 사용자가 뒤로가기를 누르면 렌더링 엔진에게 알려준다.
  

• 자료 저장소

  브라우저의 자료 저장공간, 로컬스토리지, 세션스토리지 등등이 여기에 속한다.

• 통신

  Network
  웹 브라우저의 네트워크를 담당하는 부분
  ex) 웹사이트를 호출할 때 네트워크를 담당함, 개발자 툴에서 네트워크 탭에서 활동을 볼 수 있다.

• 자바스크립트 해석기

  브라우저가 자바스크립트를 해석해서 동작하게 함, 크롬에서는 V8이라는 엔진을 씁니다.

• UI 백엔드

  사용자의 입력, 마우스 움직임, 클릭등을 핸들링 한다.

⌨️ 주소창에 'naver.com'을 입력하면 브라우저에서 어떤일이 벌어질까?

• 'naver.com'은 사용자가 보기 편하게 부여한 이름이다. 브라우저는 실제로 'naver.com'을 이해하지 못한다. 브라우저가 이해하는 건 IP주소이다.
• HTML의 최종 목표는 문서를 해석해서 마지막에 DOM tree를 만드는 것이다.

1. 브라우저는 'naver.com'의 IP주소를 찾으러 DNS(Domain Name System)을 찾아간다. 그곳에는 이름과 IP주소들이 있다.
2. DNS에서 IP주소를 받으면 주소를 찾아간다.(간략하게 설명했지만 많은 내용들이 있다.)
   DNS cache에 저장해서 다음에는 그곳에서 IP주소를 바로 가져온다.
3. IP주소로 해당 서버에 찾아가서 HTML을 요청한다.
4. 바이트 스크림을 전달 받는다. ex) 010110
   바이트 스크림을 인코딩로직을 써서 우리가 이해할 수 있는 언어로 캐릭터화 시킨다. (UTF-8으로 가장 많이 사용한다.) meta charset="utf-8"로 써놓는 이유는 무엇으로 인코딩 됐는지 멘션해주기 위해서 쓴다.
5. Document 문서가 생성되고 브라우저는 토근화(1차 해석)를 한다. 엔진이 한글자 한글자씩 읽은 후 토큰을 생성한다.
6. 생성된 토큰을 의미있는 Object로 재해석 한다. 이것을 Nodes라고 한다.
7. 생성된 Object태그(Nodes)에 관계를 준다. 이를 Model이라고 하고 이를 합쳐서 DOM(Document Object Model)돔이라고 부른다.
   관계를 다 주면 결과물이 나무같은 모습이라 DOM tree(돔트리)라고 부른다. tree는 자료의 구조 중 하나이다.
8. 태그 중 css link를 만나는 순간 HTML은 잠깐 멈춰서 DNS에서 받은 IP주소를 다시 찾아가서 css파일을 요청한다.(HTML은 IP를 찾은 후 파싱을 다시 진행한다.)
   css도 바이트 스트림 => 캐릭터화 => 토큰화 => 노드 => CSSOM tree 과정을 거친다.
   
   - css는 DOM의 생성을 막지 않는다. 그래서 상단에 위치할 수 있다. DOM은 Render Tree를 만들기 위해 CSSOM을 기다린다. DOM과 CSSOM이 완성이 돼야 다음 스텝으로 진행할 수 있다. 그렇기 때문에 HTML입장에서는 CSSOM을 최대한 빨리 만드는 것이 중요하다.
   
   - CSSOM은 웹사이트 성능에 중요한 역할을 한다. css파일이 너무 크면 DOM은 작업이 끝났어도 CSSOM을 오래 기다려야함으로 성능이 떨어지기도 한다. css파일의 크기를 줄이는 법에는 미디어 쿼리를 이용하는 것이다. 사이즈 마다 다른 css를 가지고 올 수 있기 때문이다
   ex) 데스크탑 버전 스타일만 보여주면 되는데 모바일 버전일 때 스타일을 굳이 지금 들고올 필요가 없다.
9. css 과정이 끝나면 CSSOM tree가 생성된다.
10. 태그 중 javaScript 를 만나는 순간 HTML은 잠깐 멈춰서 DNS에서 받은 IP주소를 다시 찾아가서 javaScript파일을 요청한다.
11. javaScript파일이 실행된다. javaScript는 강력하기에 javaScript가 실행되는 동안에는 DOM파싱을 멈춘다. 왜냐하면 HTML입장에서는 javaScript가 노드를 만들 수 있고 요청사항과 변경할 수 있는 것들이 많은데, DOM을 다 그린 후 javaScript요청을 받으면 많은 변화가 생길 수 있고 그렇다면 DOM을 다시 그려야 하기 때문에 DOM파싱을 멈춘 다음 javaScript요청을 받아서 한번에 처리하는게 더 효율적이기 때문이다.(javaScript파일이 실행되는 동안에는 HTML은 DOM파싱을 멈춤)
    
    
    - script태그의 위치를 HTML태그 상단에 두게되면 HTML내용을 변경하지 못한다.script태그 이후에 HTML태그 그리기를 멈춰놓은 상태이기 때문이다. 그래서 script태그를 body 바닥에 위치 시켜야한다.
    
    - javaScript가 DOM의 생성을 막지 않게하는 옵션도 있다.(defer, async) script파일이 위에 있어도 DOM의 생성을 막지않는다.
12. HTML을 통해서 DOM을 만들었고, javaScript를 불러왔고, CSS통해서 CSSOM을 만들었다. DOM과 CSSOM을 합쳐서 Render Tree라는 최종 버전을 만들게 된다.
    Render Tree(그릴 준비가 된 tree, CSS와 DOM이 합쳐진 tree)는 웹사이트를 그리기 위한 최종 설계도이다. Render Tree는 쓸 때 없는 노드들을 다 뺀다. ex) head태그, meta태그 등등 화면에 보이지 않는 것 들을 싹 뺀다. display: none 속성을 가진 태그들도 Render Tree에서 뺀다.
    
    
13. Layout 단계는 정확한 px를 계산하는 단계이다.
    
    
14. Paint 단계는 px하나 하나를 Layout알려준대로 그리는 단계이다. 한 페이지에 다 그리지 않고 여러개의 레이어로 나눠서 그린다. 여러개의 레이어로 그리면 수정사항이 생겼을 때 수정사항 레이어만 변경하면 되기 때문에 효율성이 좋다.
15. Composite 단계에서 Paint의 레이어를 합쳐서 보여준다. 그러면 유저입장에서는 한페이지로 보이게 된다.

🔁Reflow되는 상황

1. 페이지 초기 렌더링 시 (최초 Layout 과정)
2. 윈도우 리사이징 시 (Viewport 크기 변경시)
3. 노드 추가 또는 제거
4. 요소의 위치, 크기 변경(left, top, margin, padding, border, width, height 등...)
5. 폰트 변경(텍스트 내용)과 이미지 크기 변경(크기가 다른 이미지로 변경 시)

Layout이 바뀌는 것은 웹사이트 성능 측면에서 손해다. 다시 처음부터 Painting을 해야하기 때문에 웹사이트 성능에 문제를 줄 수 있어서 최소한으로 바뀌어야 성능개선에 도움이 된다.

🆙웹사이트 성능을 좋게 하려면

1. 소스의 사이즈 줄이기(바이트 수 줄이기, 크면 읽는데 시간이 오래 걸린다.)
2. 외부에서 가져오는 리소스양 줄이기(media query, 불필요한 파일 나중에 가져오기)
3. 외부에서 가져오는 횟수 줄이기. 외부에서 가져오면 시간이 걸리기 때문에 상황(외부에서 쓰지 않는 스타일 등등)에 따라 인라인스타일을 주는게 더 효율적이다.
4. Reflow, Repaint 줄이기, position:left, right(Reflow부터 시작함)보단 trasfrom쓰는게 도움이된다.
   애니메이션 움직일 대 1px씩 보단 3px씩 하면 Repaint때 덜그리게 되서 도움이 됨

출처_코딩알려주는누나: https://www.youtube.com/watch?v=Mqh13dNI8jc