| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
- 일기
- 프리온보딩
- 초보개발자
- node.js
- Developer
- 원티드
- 전염병
- 프로그래머스
- 자바스크립트
- 프론트엔드
- react
- 프로젝트
- 코로나19
- Prototype
- 개발자
- 웹개발
- dev-maching
- Javascript
- IT
- 스터디
- 컨테이젼
- Strict Mode
- 프론트엔드취준생
- 컴포넌트
- express
- 웹개발자
- Vue
- 리액트
- 개발자일기
- 인턴쉽
- Today
- Total
프로그래밍밍
2019.12.26 브라우저의 동작원리 본문
브라우저의 동작원리
Node.js가 개발됨으로써 자바스크립트는 서버사이드 애플리케이션 개발에도 자주 사용되는 언어가 되었다.
하지만 역시 클라이언트 사이드 개발에 더 자주 사용된다. 대부분의 프로그래밍 언어는 운영체제 위에서 실행되지만 웹 어플리케이션은 브라우저에서 실행된다. 따라서 오늘 이 브라우저에 대하여 알아보도로 하자.
브라우저의 핵심 기능은 서버에 요청(Request) 하고 응답(Response)을 받아 브라우저에 표시하는것이다.
브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일을 응답받는다. HTML, CSS파일은 랜더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 랜더 트리로 결합된다. 이렇게 결합된 랜더 트리를 브라우저에 표시하는것이다.
JavaScript는 랜더링 엔진이 아닌 자바스크립트 엔진이 처리한다.
따라서 HTML파일에서 <script> 태그를 만나면 하던 작업을 중지하고 권한을 JavaScript 랜더링 엔진으로 넘긴다.
권한을 넘겨받은 JavaScript 랜더링 엔진은 JS 코드 또는 어트리뷰트에 정의된 파일을 파싱하여 실행시킨다.
실행이 완료되면 다시 HTML 랜더링 엔진에게 권한을 넘겨서 작업을 중지했던 지점부터 다시 시작한다.
이 처리과정을 보게되면 알수있는것이 있다.
JavaScript 태그가 코드의 중간에 위치하게 되면 랜더링 중간에 블로킹이 발생하여 페이지 로딩이 지연될수있다는 점이다. 그리고 DOM의 생성이 완료되지 않은 시점에 JavaScript가 DOM을 제어한다면 에러가 발생한다.
따라서 이러한 문제를 없애기 위하여 <Script> 태그는 <body> 태그의 가장 아래에 위치시키는것이 일반적이다.
'Programming > JavaScript' 카테고리의 다른 글
| 2019.12.27 데이터 타입과 변수 (0) | 2019.12.27 |
|---|---|
| 2019.12.26 JavaScript 기본 문법 (0) | 2019.12.27 |
| 2019.12.26 JavaScript 환경셋팅 (0) | 2019.12.26 |
| 2019.12.25 JavaScript&ECMAScript (0) | 2019.12.26 |
| 2019.12.25 프로그래밍의 기본개념과 동작원리의 이해 (0) | 2019.12.25 |
