[웹 개발] JavaScript - 1. JavaScript 동작원리

자바스크립트의 동작원리

  Javascript는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 Full-stack 개발 언어이지만, 그래도 Javascript가 가장 많이 사용되는 분야는 웹 브라우저에서 동작하는 웹 페이지/애플리케이션입니다.

 브라우저의 주요 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 응답(Response)을 받아 브라우저에 표시하는 것입니다. 

 브라우저는 서버로부터 html, css, javascript 파일을 응답받습니다. html, css 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합됩니다.

 HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어 권한을 넘깁니다. 자바스크립트 엔진의 실행이 완료된 후 브라우저가 중지했던 시점부터 DOM 생성을 재개합니다. 이것은 script 태그의 위치에 의해 DOM의 생성이 지연될 수 있음을 의미한다.

 위와 같은 이유 때문에 body요소의 가장 아래에 스크립트를 위치시키는 것은 좋은 방법입니다. HTML요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축될 것입니다. 또한 DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생됩니다.

※ 내 생각

 script는 하단! 이 아니라 어떤 작업 혹은 라이브러리가 선행되야하는지 이해하고 작업하면 될 거라 생각합니다.

 다국어 설정 관련한 라이브러리를 보고있는데 이와 같은 경우가 번역하려는 페이지 로딩전에 스크립트가 위치하면 라이브러리가 작동을 안하므로 script를 하단에 위치시켜야 한다고 하네요.