JavaScript
Browser Rendering
HTML을 파싱하여 DOM tree를, CSS를 파싱하여 CSSOM tree를 만들고 이 둘을 조합해 Render tree를 만든다. 이를 배치하고 그리는 과정이 바로 이전 포스트에서 다룬 Reflow와 Repaint이다.
ReadReflow와 Repaint
수정된 Render tree를 다시 렌더링하는 과정에서 발생한다. Reflow는 위치와 크기를 계산, Repaint는 시각적인 요소를 표현하는 과정이다. 당연히 필요한 과정이지만 효율적으로 컨트롤하지 못하면 웹애플리케이션의 성능을 떨어뜨리는 주된 요인이 된다.
ReadDocument Fragment
여러 노드를 하나의 그룹으로 감싸 다른 곳으로 전달하게 해주는 Wrapper 노드이다. 리액트에서의 Fragment와도 의미상 비슷한 개념이라고 볼 수 있겠다.
Read이터레이터와 제너레이터
Iterator는 반복을 위해 설계된, 특별한 인터페이스를 가진 객체이다. [Symbol.iterator] 프로퍼티를 가진 객체를 Iterable하다고 한다. 이터러블 객체는 for...of문으로 순회할 수 있고 Spread 문법을 사용 가능하다. Generator는 Iterator를 반환하는 함수이다.
ReadJavaScript의 prototype
Java와 같은 클래스 기반 언어에서는 Class를 통해 객체를 생성하는데, JavaScript는 Class가 없어 Function과 prototype을 통해 객체를 만든다. 이 때문에 자바스크립트는 프로토타입 기반 언어라고도 불린다. Function의 기본 property인 prototype과 객체의 기본 property인 __proto__, 그리고 프로토타입 체인에 대해 알아본다.
Read가비지 컬렉션(Garbage Collection)
더 이상 사용되지 않을 변수와 함수를 메모리 힙에서 제거함으로써 메모리를 효율적으로 관리하는데 이 과정을 Garbage Collection이라고 한다.
Read객체 모델(DOM, BOM)
자바스크립트는 큰 틀에서 보면 DOM, BOM, 그리고 Core로 분류된다고 한다. 참고로 Core는 문법, 라이브러리 등을 의미한다는 점 정도로만 알아두고, 객체 모델인 DOM과 BOM에 대해 다뤄본다.
Read