HanSol

- 클로저란 함수와 함수가 선언된 어휘적 환경의 조합. (MDN 정의)

- 함수가 속한 렉시컬스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능

function outer() {
  var a = 2;
  function inner() {
    console.log(a);
  }
  return inner;
}
var func = outer();
func(); // 2

위 예제에서 GC(GarbageCollector)가 outer()의 참조를 없앨 것 같지만 내부함수인 inner()가 해당 스코프의 변수인 a를 참조하고 있기 때문에 없애지 않음

따라서 스코프 외부에서 inner()가 실행되도 해당 스코프를 기억하기 때문에 2를 출력

즉, 여기서 클로저는 inner()가 되며 func에 담겨 밖에서도 실행되고 렉시컬 스코프를 기억

클로저로 자바스크립트에는 없는 캡슐화라는 개념을 구현할 수 있고 정보 은닉과 캡슐화가 가져다주는 이점들을 얻을 수 있다.

Reflow

- DOM 엘리먼트 추가, 제거, 변경

- CSS 스타일 추가, 제거, 변경

- CSS 스타일 직접 변경 or 클래스 추가로 인한 레이아웃 변경

    - 엘리먼트의 길이를 변경하여 DOM 트리에 있는 다른 노드에 영향을 줄 경우

- CSS3 애니메이션과 트랜지션

    - 애니메이션의 모든 프레임에서 리플로우 발생

- offsetWidth 와 offsetHeight 의 사용

    - offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거 되어 수치를 계산

- 유저 행동 or 유저 인터렉션으로 발생

    - hover 효과

    - 필드에 텍스트 입력

    - 창 크기 조정

    - 글꼴 크기 변경

    - 스타일시트 or 글꼴 전환

Repaint

- 가시성이 변경되는 순간

    - opacity, background-color, visibility, outline

- Reflow가 실행된 순간 뒤에 실행

- 브라우저가 화면 요소를 렌더링 할 땐 크롬: 블링크(Blink), 사파리: 웹킷(Webkit), 파이어폭스: 게코(Gecko) 등과 같은 렌더링 엔진을 사용

- 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path, 중요 렌더링 경로) 이라는 프로세스를 사용

렌더링의 단계

- HTML 파싱 > DOM(Document Object Model) 트리 구축

- CSS 파싱 > CSSOM(CSS Object Model) 트리 구축

- Javascript 실행 

    - ! HTML 중간에 스크립트가 있을 경우 HTML 파싱 중단 !

- DOM과 CSSOM을 조합하여 렌더트리 구축

- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 : Layout(Reflow) 단계

- 계산한 위치/크기 기반으로 화면을 그림 : Paint 단계