브라우저렌더링

브라우저 렌더링 원리 (홈페이지가 사용자에게 보이는 순서)

1. 주소창에 입력된 주소를 통해 서버를 찾아감

2. 이 후 DNS가 연결해줄 곳을 찾는다.

3. 서버에서 HTML 파일을 클라이언트로 보낸다.

4. HTML 문서는 파싱되어 DOM을 생성한다.

5. 중간에 css를 로드하는 link or style 태그를 만나면 DOM 생성을 중지한다.

6. CSS를 파싱하고, CSSDOM을 생성

7. 만들어진 DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합된다.

8. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다.

9. 이 후 JS엔진을 실행하고 JS코드를 파싱한다.

자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게된다.

리플로우: 레이아웃 계산을 다시 하는것

리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트 하는 것

여기서 script 태그를 만날대마다, 파싱이 중단되는 문제를 script 태그 뒤에 async or defer을 붙여줌으로써 해결할 수 있다.

async: HTML 파싱, JS 파일 로드가 동시에 진행

defer: DOM 생성이 완료된 직후, JS의 파싱과 실행이 진행된다.

호이스팅이란?

모든 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

console.log(name1) // undefined
var name1 = '자몽'

console.log(name2) //ReferenceError
let name2 = '자몽'

var는 선언, 초기화 동시에 이루어지고,

let, const 는 선언단계만 호이스팅 되기 때문에 실행 결과가 다르다.

선언 => 초기화 => 할당

클로저란?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명주기가 다한 외부 함수의 변수를 참조할 수 있으며, 이러한 중첩 함수를 클로저라고 한다.

클로저는 은닉성이라는 장점을 가지고 있다.

function closureF() {
let name = 'jamong';
return function() {
return name;
};
}
let closure = closureF();
console.log(closure()); //'jamong'출력

코드를 보면 closureF함수가 종료되었음애도 name 에 저장된 값이 그대로 출력되는 것을 볼수 있다.