브라우저(browser) ?특정 웹사이트를 접근한다고 하자.
사용자가 보고자 하는 페이지를 서버에 요청하고 서버로 부터 받은 응답(HTML,CSS,JavaScript, 이미지 등..) 을 브라우저에 표시하는 것이다. 주로 알고 있는 웹 브라우저로는 파이어폭스, 구글크롬, 인터넷 익스플로러, 사파리 등이 있다.
브라우저의 기본 구조1. 사용자 인터페이스
2.
브라우저 엔진 3. 렌더링 엔진 4. 통신 5. UI 백엔드 6. 자바스크립트 해석기 7. 자료 저장소 렌더링 엔진렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다. 렌더링 엔진은 HTML및 XML 문서와 이미지를 표시 할수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다. 각 브라우저 마다 사용하는 렌더링 엔진은 다른데 다음과 같다.
렌더링 과정1.불러오기(Loading)HTTP 모듈 또는 파일 시스템으로 전달 받은 리소스 스트림을 읽는 과정으로 로더가 이 역할을 맡고 있다. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일 다운로드 받을지를 결정한다. 2.다운받은 HTML, CSS를 Object Model로 만든다.
◾ HTML -> DOM ◾ CSS -> CSSOM (
3. DOM과 CSSOM을 합친다.◾Render Tree 4. Layout렌더트리가 만들어 졌으면 이것을 토대로 그려질 노드와 그의 스타일값 그리고 치수까지 계산한다.
5. Paint이 정보들을 페인팅 단계로 전달해서 렌더트리의 각 노드를 화면산의 실제 픽셀로 변환한다. HTML파서가 <script> 태그를 만나면?자바스크립트는 자바스크립트 엔진이 처리하는데 HTML파서는 제어권을 넘겨받은 자바스크립트 엔진은 자바스크립트 실행이 왼료되면 다시 HTML파서로 권한을 넘겨서 아까 중지했던 시점 부터 다시 DOM생성을 재개 한다. 브라우저는 동기적으로 HTML, CSS, Javascript를 처리하는데, 이는 보통 스크립트 로드 시점 - async, defer지금까지 알아본 바에 의하면 스크립트를 문서의 마지막 다만, 문서의 이렇게 스크립트의 일반적인 실행기본적으로
위의 그림에서 보여주듯이 스크립트를 가져 와서 실행 하기 위해 HTML 구문 분석이 일시 중지 되므로 HTML이 화면에 출력되는 시간이 길어진다. async 속성이 추가된 경우의 실행
defer 속성이 추가된 경우의 실행
비동기적으로 로드된 스크립트와 마찬가지고, HTML 구문분석이 실행되는 동안 (HTML해석을 방해하지 않고) 스크립트 파일을 다운로드 할 수 있따. 여기서 async 속성과 차이점 은 HTML구문 분석이 완료되기 전에 스크립트 다운로드가 완료 되더라도 구문 해석이 완료 될 때까지 스크립트는 실행되지 않는다는 점이다.
그렇다면 언제 사용 해야 할까?1. 2. 스크립트 파일의 의존성 여부에 따라 참고 본 포스팅은 프론트 엔드 개발자 기술면접 인터뷰 질문 모음을 기반으로 요약, 정리한 내용입니다.
|