문서를 읽어 브라우저가 문법을 분석, 코드를 이해
<SCRIPT>
태그를 만나면, JS를 해석할 때까지 파싱을 멈춘다.
왜?!
js는 document.write()메소드를 이용해서 dom을 변경할 수 있다.
그래서 실행되는 javascript 코드에서 dom을 변경할 가능성이 있기 때문에,
js를 모두 해석하고난 후까지 파싱을 멈춰서 기다리는 것!
그래서,
예전에는 성능향상을 위해 script 태그를 html 문서의 맨 하단으로 두는 꼼수?를 부리기도했음
하지만, 현대의 웹개발에는 그럴 필요가 없음!
=> 현대 웹개발에서는, 3가지 신호를 이용해서 js태그를 만났을 때 파싱을 멈출 필요가 없다고 알려줄 수 있어서! 그럴 필요가 없음!
브라우저에서 사용할 수 있는 구조로 변환 (dom)
css를 객체형태로 변환
DOM과 CSSOM을 결합하여 화면에 그려낼 내용을 작성
즉, 어떤 엘리먼트에 어떤 스타일을 적용할 것인지 정해짐
각 요소의 크기와 위치를 계산(layout 단계)
계산만할 뿐 실제 그리지는 않음
잠깐! 여기서 말하는 레이아웃은, 브라우저의 레이아웃
브라우저가 자체적으로 레이아웃을 만듬
위의 개발자도구에서 확인가능
레이아웃에 대한 규정은 딱히 없지만, 일반적으로 30이하를 권고?
요소를 실제 픽셀로 변환하여 그린다. (paint 단계, rasterize)
픽셀로 그려진 여러 레이어를 합성한다. (compositing 단계)