진행 과정
-
요청과 응답:브라우저->서버에 웹페이지(HTML/CSS/JS/이미지 파일) 요청->서버가 응답(HTML/CSS/JS/이미지 파일)
-
Parsing(돔 트리를 만드는 과정): 브라우저의 렌더링 엔진(서버에서 받아온 자료를 브라우저가 이해하고 사용할 수 있게 DOM구조로 만드는 기능을 함)이 HTML/CSS을 HTML/CSS parser를 통해 DOM ,CSSOM 트리 형성
-
렌더 트리의 형성: DOM/CSSOM트리를 결합하여 렌더트리를 형성 후 이것이 화면에 드러남
주의
- js는 렌더링 엔진이 아닌, js엔진이 처리
- 렌더링 엔진의 HTML parser가
<script>태그를 만나면 js실행을 우선적으로 함 - 따라서
<script>태그를 만나면 HTML파서가 DOM생성을 중지하고 js엔진에게 제어 권한을 전달,그 후 js엔진이 js를 파싱후 실행 - js실행이 완료되면 다시 HTML parser가 권한을 받아서
중단되었던 DOM부터 다시 생성(script태그를<body></body>태그 가장 밑에 두는 이유)
렌더링 엔진이란?
- 역할: 브라우저가 요청한 내용을 서버로부터 받아 브라우저 화면에 표시함
- 화면에 표시하는 과정에서 parsing을 한다(서버로부터 받은 문서를 브라우저가 이해하고 사용할 수 있는 구조(DOM트리)로 변환)
- 종류: webkit(크롬/사파리),Gecko(파이어폭스)
- 표시가능한 것들: HTML/XML 문서/이미지/pdf
superfly