서론
이미 따로 깊게 공부해본 파트긴 한데, 복습겸 다시 진행해보자 ㅎㅎ
브라우저
브라우저는 HTML,JS,CSS파일을 받아서 해석하여 화면을 보여준다. 어떻게 해석해서 보여주는지 알아보자!
https://developer.chrome.com/blog/inside-browser-part1?hl=ko
책과 이 사이트를 교차로 보며 작성함.
요청과응답
렌더링 리소스는 결국 서버에서 가져와야함. 따라서 서버에 요청한다(requset).
이때 URL을 입력하면, 캐싱한 hosts가 존재하면 IP를 바로 넘기고, 아니면 가까운 DNS에서 IP를 반환해주고
이 IP 주소를 갖는 서버에 요청을 전송함.
예를들어 https://www.naver.com 을 검색하면, 루트요청에대해 기본적으로 index.html을 응답하도록 되있음.
개발자도구 네트워크 탭 보면 응답한 html파일이 잘있는데, 다른 파일(img, css ,js...)도 존재함,
왜 있는걸까?
=> HTML을 파싱하는 도중 외부 리소스를 로드하는 태그를 preloadScanner로 미리 가져와줌. 단, <script> 태그를 만나면 html 파싱이 일시중지 후 자바스크립트를 파싱함.
파싱(HTML)
파싱이란 구문 분석이다. 즉, 프로그래밍 언어의 문법에 맞게 작성된 텍스트를 토큰으로 분해(어휘 분석)하고
토큰에 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 일련의 과정이다.
이후 파스 트리를 기반으로 바이트 코드를 생성하고 실행한다.
https://velog.io/@seungchan__y/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-Compiler-Interpreter-%EC%96%B8%EC%96%B4%EB%8B%A4#-%EC%B6%9C%EC%B2%98-%EB%B0%8F-%EC%B0%B8%EA%B3%A0%EC%9E%90%EB%A3%8C
https://www.geeksforgeeks.org/difference-between-compiler-and-interpreter/
https://ko.wikipedia.org/wiki/%EC%B6%94%EC%83%81_%EA%B5%AC%EB%AC%B8_%ED%8A%B8%EB%A6%AC
https://blog.naver.com/PostView.naver?blogId=jamiee0214&logNo=222158767447&redirect=Dlog&widgetTypeCall=true&directAccess=false
나중에 볼거
HTML을 파싱하게되면 바이트 => 문자 => 토큰 => 노드를 거쳐 브라우저가 이해할 수 있는 자료구조인 DOM을 형성하게됨
즉, DOM은 HTML을 파싱한 결과물.
파싱(CSS)
CSS역시 파싱과정을 거쳐 CSSOM을 만듬. HTML을 파싱해서 DOM을 만들다가도 CSS를 만나면 중단하고 CSSOM을 만든다.
레이아웃 트리
문서 구조와 각 노드의 스타일을 알지만 화면 나타내기 충분치않음.
휴대전화로 친구에게 그림을 묘사한다고 상상해 보세요. '커다란 빨간색 원과 작은 파란색 정사각형'으로는 그림이 정확히 어떤 모양인지 친구가 알 수 있는 정보가 아닙니다.
위치, 크기 등 수치화된 정보가 필요. 또한 화면에 보이는 요소만 포함함
display:none은 포함하지 않고 visibility:hidden은 포함. 콘텐츠가 있는 의사클래스도 DOM에는 없지만 레이아웃트리엔 있음
페인트
스레드가 레이아웃트리를 탐색하여 페인트 레코드 제작.
z-index 등 렌더링에 영향을 끼치는 요소를 전부 포함하여 형성. 그리기 작업을 시작한다.
리플로우, 리페인트
아까 레이아웃과 페인트가 위치,크기 등과 z-index처럼 우선순위를 정한다고 하였다. 만약 이를 변경하는 DOM조작이 일어날시
다시 일련의 과정 (DOM, CSSOM, 레이아웃, 페인트, 컴포짓...)을 거치게됨
리플로우는 레이아웃 계산을 다시하는 것. 리페인트는 레이아웃 계산이 완료되고 재결합된 렌더트리를 기반으로 다시 페인트 하는 것.
레이아웃에 변화가 없다면 리페인트만 진행됨.
JS파싱과 실행
HTML, CSS를 파싱하여 ObjectModel을 형성하였듯 렌더링 엔진은 AST(Abstract Syntax Tree, 추상구문트리)를 형성한다. 이를 기반으로 인터프리터가 실행할 수 있는 바이트 코드를 생성해서 실행한다.
토크나이징(토큰화) => 토큰에 문법적 의미와 구조를 반영하여 AST 형성(파싱) => 바이트코드로 변환되어 인터프리터에서 실행 / V8엔진은 기계어로 컴파일되어 성능을 최적화한다.
이렇게 JS를 만나면 HTML파싱이 중단된다. 따라서 script태그의 위치가 중요한데, 요즘은 보통 defer키워드를 사용하여 DOM생성 직후 파싱을 실행한다 ㅎㅎ
느낀점
한번 했던걸 또 하니까 머릿속에 쏙쏙 들어온다. 다만 전체적인 흐름과 중요 키워드만 기억할 수 있을것 같다. 나중에 까먹으면 다시봐야지
