2020. 3. 2. 15:11ㆍ웹/Javascript
1. 개요
-
브라우저에서 렌더링의 성능은 중요한 요소 가운데 하나
-
렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있음
2. 브라우저의 주요 컴포넌트
-
웹 앱을 구성할 때 자바스크립트의 코드를 작성하는 것과 실행하는 것을 분리하면 안됨
-
자바스크립트 코드는 환경과 상호작용
1) 사용자 인터페이스
주소 입력 바, 앞/뒤로가기 버튼, 즐겨찾기 메뉴 등. 웹 페이지를 보는 창을 제외한 브라우저 디스플레이의 모든 부분.
2) 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 상호작용을 다름.
3) 렌더링 엔진
웹 페이지의 표시를 책임. 렌더링 엔진은 HTML과 CSS를 파싱하고 화면에 파싱된 내용을 표시.
4) 네트워킹
다양한 플랫폼에서 여러 구현 방식을 사용해 만들어진 XHR 요청과 같은 네트워크 호출.
HTTP 요청과 같은 네트워크 호출에 사용. 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5) UI 백엔드
체크박스/Select/Input 및 윈도우와 같은 기본적인 위젯을 그리기 위해 사용.
특정 플랫폼이 아닌 일반적인 인터페이스를 제공. 하층의 운영체제 UI 메서드를 사용.
6) 자바스크립트 엔진
자바스크립트 코드를 해석하고 실행.
7) 데이터 저장소
자료를 저장하는 계층, 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있음.
HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의되어 있음.
Cookie, localStroage, indexDB, WebSQL, FileSystem 등의 저장 메커니즘.
3. 렌더링 엔진
렌더링 엔진의 주요 역할은 브라우저 화면에 요청된 페이지를 표시하는 것
렌더링 엔진은 HTML 및 XML 문서와 이미지들을 표시. 추가적인 플러그인 사용 시, 엔진은 PDF와 같이 다른 문서도 표시 가능.
브라우저는 서버에서 받아온 HTML문서를 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 파싱.
파싱된 문서는 브라우저 렌더링 엔진에 따라서 브라우저에 사용자가 볼 수 있도록 그리지만 브라우저 별로 그리는 방식이 다름.
※ 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정
1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산
2) 계산된 요소의 화면 표현(일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그림)
※ 렌더링 엔진
브라우저 마다 서로 다른 엔진 사용
- Gecko : Firefox
- Webkit : Safari, Chrome
4. 렌더링 엔진의 기본적인 과정
HTML을 파싱해 DOM 트리를 구성 -> 렌더 트리를 구성 -> 렌더 트리를 레이아웃 -> 렌더 트리를 그리기
브라우저 내부에서 수행되는 단계
1) HTML 분석
2) 외부 스타일 시트 로드
3) 문서에서 스크립트 분석 후 실행
4) HTML DOM 구성
5) 이미지와 외부 콘텐츠 로드
6) 페이지 로딩 끝
단, HTML 구조에 따라 다름,
HTML 구조에 따라 다른 예제
<script> 꼬리표가 css를 로드하는 <link> 꼬리표 보다 앞에 있으면, css 보다 먼저 스크립트가 로드(비효율적).
헤드에 있거나 외부 파일로부터 로드된 스크립트는 HTML DOM이 실질적으로 구성되기 전에 실행됨.
이러한 지점에서 실행되는 스크립트는 DOM에 접근하지 못하기 떄문에 심각한 문제 유발.
또한, <body> 꼬리표 전에 <script> 꼬리표를 포함하더라도 자바스크립트가 DOM을 처리할 준비가 되어 있지 않을 가능성은 존재.
해결 방법 1) 페이지가 로드될 때까지 대기
// 윈도우 load 속성에 콜백을 붙인 addEventListener 함수
window.addEventListener('load', function() {
// HTML DOM 연산을 처리
var theSquare = document.getElementById('square');
theSquare.style.background = 'blue';
});설명
페이지가 로드될 때 윈도우 객체에 로드 이벤트를 씌우는 방식. 과정이 단순하지만, 가장 느림.
로드 작업 순서를 살펴보면 페이지를 로드하는 일이 가장 마지막에 진행.
src 속성을 가지는 일체의 원소가 자체 파일을 내려받기 전에는 로드 이벤트가 발생하지 않음, 즉 페이지가 상당수의 이미지나 비디오 같은 것을 포함하고 있다면, 자바스크립트가 실행되기까지 대기.
이 기법은 하위 버전과 가장 잘 호환됨.
해결 방법 2) 맞춤한 이벤트 기다리기
// DOMContentLoaded 사용(IE8은 DOMContentLoaded 지원 X)
document.addEventListener('DOMContentLoaded', functionHandler);
// 브라우저간 호환성 알아보는 방식
// 브라우저간 DOMContentLoaded
if(document.addEventLisnter){
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded', arguments.callee);
});
}else if(document.attachEvnet){
document.attachEvent('onreadystatechange', function() {
document.detachEvent('onreadystatechange', arguments.callee);
});
}설명
현대적인 브라우저를 사용한다면 DOMContentLoaded 이벤트를 확인, 이 이벤트는 문서가 완전히 로드되고 분석된 다음에 발생.
위의 기법과는 다르게 HTML DOM이 완전히 구성된 상황과 대응.
하지만 이 이벤트의 경우 이미지, 스타일시트, 비디오, 오디오 등과 같은 것들이 완전히 로드되지 않았을 수도 있음.
만일 특정 이미지나 비디오 파일이 로드된 다음에 이벤트가 발생하길 원한다면, 해당하는 특정 꼬리표에 대해 로드 이벤트를 사용.
만일 src 속성을 가진 일체의 원소가 자체 파일을 내려받을 때까지 기다려야 한다면, 윈도우 로드 이벤트를 사용하는 것이 좋음.
출처
1) https://12bme.tistory.com/140
3) https://jeong-pro.tistory.com/90
'웹 > Javascript' 카테고리의 다른 글
| DOM(Document Object Model) (0) | 2020.03.05 |
|---|---|
| 콜스택과 메모리 힙 (0) | 2020.03.05 |
| Javascript Runtime (0) | 2020.03.05 |
| 자바스크립트 엔진 - V8 (0) | 2020.03.02 |
| 자바스크립트 엔진 (0) | 2020.03.02 |