JavaScript
JavaScript 렌더링 과정
메성
2019. 12. 9. 10:23
반응형
DOM
- DOM(Document Object Model) : 문서(html문서)의 태그들을 Javascript가 이용할 수 있는 객체만들고 이를 인식하는 방식을 말함.
즉, 웹 브라우저가 HTML 페이지를 인식하는 방식 / DOM은 태그들의 트리 형식으로 이루어짐렌더링
1. DOM 트리 생성
2. 스타일 구조체 생성(css)
3. 렌더 트리 생성
- DOM 트리와는 다르게 각 노드에 스타일 정보가 설정되어 있음.
- <head>, <title>, <script>는 렌더 트리의 구성원이 아님.
4. 레이아웃 처리
- 렌더 트리의 각 노드의 크기가 계산되고, 문서에서 정확한 위치를 계산
- 계산 시 화면 해상도보다 높은 해상도로 처리(고객의 확대 축소를 할 시 깨지지 않게하기 위함)
5. 페인트document.ready() vs window.load()
- $(document).ready()
- 외부 리소스, 이미지와는 상관없이 DOM 트리를 생성한 직후 실행
- window.load()보다 더 빠르게 실행되고 중복 사용할 시 선언한 순서대로 진행
- $(window).load()
- html의 로딩이 끝난 후 시작
- 랜더링이 모두 끝난 후(웹 브라우저 메모리에 모두 올려진 다음) 이벤트 발생
- <body onload> 보다 먼저 실행 / onload를 쓰는 이유는 body onload는 jquery CDN($)을 import 안해도 됨prototype
- 함수에 프로토타입을 사용하면 해당 함수로부터 생성된 필드 값 및 함수들은 공유가 가능
- function test(){} | test.prototype = {필드 및 함수}
- var test1 = new test1();
- var test2 = new test2();
- test1과 test2는 필드 및 함수를 공유가 가능함.
- 즉, 공유 자원으로 생각해볼 수 있음.this
- this란,
- JAVA : 클래스 인스턴스의 레퍼런스 변수를 말함 즉, new 명령어를 통해 생성한 객체를 대입 받는 변수를 말함.
- JavaScript : 현재 실행 문맥 반응형