사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면, 브라우저의 렌더링 엔진에서는 이를 파싱한다.
HTML 파싱을 진행하면서, DOM 트리를 만들게 되는데, 이 때 Link 태그를 만나 StyleSheet를 내려받게 될 경우 CSS 파싱을 통해 CSSOM 트리를 만들게 된다.
이 일련된 과정을 통해 둘을 결합하여 렌더 트리를 만들고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산한 뒤, 화면에 뿌려주게된다.
위 과정을 진행하면서 자바스크립트를 만나면, 자바스크립트 런타임 환경에 컨트롤(수행권한)을 넘겨 결과 값을 받는다.
이 과정 중, DOM파싱은 중단된다.
생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의 수치를 재계산하여, 렌더 트리를 재생성하는 과정을 Reflow 과정이라고하며, 이 과정이 끝난 후 재생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint라고 합니다.
reflow가 이루어졌다고 항상 repaint가 되는 것은 아니며, background-color, visibillty, outline 등 레이아웃 수치에 영향을 끼치지 않는 것은 repaint 과정만 진행됩니다.
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.
호이스팅에는 함수 호이스팅과 변수 호이스팅이 있는데, 변수 호이스팅의 경우 각 변수 선언 키워드 마다 차이가 있습니다.
함수 호이스팅의 경우에는 함수 선언식을 통해 작성한 함수는 해당 함수의 내부 블럭까지 호이스팅되기 때문에 어디서든지 사용할 수 있으나, 함수 표현식의 경우에는 변수 호이스팅과 동일하게 동작하기 때문에 이 점을 유의하여 코드를 작성해야합니다.
이는 실행컨텍스트의 동작 방식을 통해 더 자세히 이해할 수 있습니다.