[Javascript] 5. 클라이언트 측 자바스크립트

JS 2021. 4. 25. 16:27

728x90

✔︎ 웹 브라우저에서의 자바스트립트

자바스크립트를 사용하지 않은 웹 페이지를 정적( Static ) 웹 페이지라고 합니다. 반대의 경우는 동적( Dynamic ) 웹 페이지라고 부릅니다.

동적 웹페이지를 구성하는데 자바스크립트는 크게 아래의 역할을 수행합니다.

🚀 웹 페이지의 Document 개체 제어 ( HTML, CSS )

🚀 웹 페이지의 Window 개체 및 브라우저 제어

🚀 웹 페이지에서 발생하는 이벤트 처리

🚀 HTTP를 이용한 통신

✔︎ 웹 브라우저에서의 자바스트립트 실행 순서

웹 브라우저에는 HTML문서를 분석하고 표시하는 렌더링 엔징이란 프로그램이 존재합니다.

렌더링 엔진이 아래의 과정을 거치면서 최종적으로 자바스크립트 코드를 실행합니다.

🚀 HTML 마크업을 처리하고 DOM 트리를 구축합니다.

이때 HTML이나 리소스에 CSS도 포함되어 있다면, CSS 마크업도 처리하여 CSSOM 트리도 구축합니다.

👻 DOM ( Document Object Model )

DOM은 웹 페이지의 HTML, XML 문서에 대한 프로그래밍 interface 입니다.

즉, 여러 프로그래밍 언어를 활용해서 웹 페이지의 콘텐츠, 구조 및 스타일을 조작할 수 있도록 하는 API 입니다.

HTML 파일을 토큰화 하여 여러 태크들 간의 관계를 정의하기 위해 트리 형태로 구축

👻 CSSOM ( CSS Object Model )

style.css 등과 같은 스타일 시트가 포함되어 있는 경우, 해당 CSS를 해석하여 CSSOM를 구성합니다.

🚀 CSSOM 트리와 DOM 트리를 결합하여 렌더 트리를 구성합니다.

렌더 트리는 브라우저에 표시될 각 요소의 레이아웃을 계산하는데 사용됩니다.

🚀 각각의 노드의 정확한 위치와 크기를 계산하는 레이아웃 단계를 진행합니다.

레이아웃의 결과인 정확한 위치와 크기 그리고 픽셀 값을 렌더트리에 반영합니다.

🚀 레이아웃 단계에서 계산한 값들을 이용해 렌더 트리의 각각의 노드를 화면상의 픽셀로 변환하는 페인트 단계를 진행합니다.

위치와 상관없는 CSS 속성들을 이때 적용합니다.

🚀 앞서 생성한 레이어를 합성하여 브라우져의 스크린을 랜더합니다.

이후 사용자가 화면에서 웹페이지를 볼 수 있습니다.

👻 성능최적화

브라우져 로딩과정에서 스타일 이후의 과정은 언제든지 반복될 수 있습니다.

랜더트리는 자바스크립트에 의해 DOM, CSSOM 트리가 변경되면 재구성 됩니다.

이후, DOM이 추가/삭제되거나 기하적인 변화가 존재하는 경우 레이아웃 단계를 다시 진행합니다.

하지만 반대로 기하적인 변화가 없이 단순히 컬러와 같은 변화만 존재한다면 레이아웃을 건더뛰고 페인트가 진행됩니다.

당연하게도 레이아웃을 건너 뛰는게 부하가 훨씬 적습니다.

또한 블록 리소스 (CSS, JavaScript)의 최적화도 필요합니다.

CSSOM 트리는 CSS를 모두 해석해야만 구성할 수 있기에 CSS로 인해 랜더링이 차단되지 않도록 HTML 최상단에 배치시킵니다.

자바스크립트도 마찬가지로 <script> 태그를 만나면 현재까지 생성된 DOM에만 접근할 수 있기때문에 HTML 최하단에 배치합니다.

메모장 메모장