티스토리 뷰

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 : 현재 실행 문맥
반응형
저작자표시

'JavaScript' 카테고리의 다른 글

ES6 모듈화  (0) 2019.12.09
콜백 함수  (0) 2019.12.09
JavaScript의 주요 기초  (0) 2019.11.28
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함