브라우저 동작원리 & 메모리

 

브라우저

브라우저는 크게 3가지 동작으로 나눌 수 있다.

 

통신 -> 렌더링 -> 스크립트 실행

 

통신

말 그대로 서버와의 통신을 의미한다.
브라우저가 서버에게 요청(url)을 보내면 서버는 그 요청값에 따른 특정값을 응답해준다.

 

렌더링

DOM(Document Object Model)이라 불리는 객체를 화면에 그리는 것을 의미한다.
DOM은 통신 단계에서 받은 html을 브라우저가 읽어서 생성한다.
또한 DOM은 트리구조로 되어있다.

 

스크립트 실행

말 그대로 자바스크립트 실행을 의미한다.
브라우저가 스크립트 태그를 통해 자바크스립트 파일을 읽으면 바로 실행된다.
이 단계에서 우리는 동적인 화면을 구성할 수 있다.

 

 

 

 

메모리

메모리는 세가지의 과정을 거친다.

 

할당 -> 사용 -> 해제

 

할당

변수를 선언하면 메모리 한 공간에 우리가 사용할 수 있도록 할당된다.

 

사용

그 할당된 공간에 값을 넣어 사용할 수 있다.

 

해제

사용을 한 후 메모리에서 해제하여 제거할 수 있다.
자바스크립트 엔진에서는 사용하지 않는 메모리를 가비지 컬렉터라는 자동 메모리 관리 알고리즘을 통해 사용하지 않는 메모리 공간을 알아서 해제해준다.

 

아래의 코드로 좀 더 알아보자

1. let variable = 123
2. let variable2 = variable
3. variable = variable + 1

위 코드 설명

// 0x0004와 같은 주소는 설명을 위해 예시로 넣은 주소입니다.
1. variable 변수가 메모리 0x0004의 주소를 할당받으며 값(123)이 그 주소로 저장됨.
2. variable2 변수에 먼저 선언한 variable 변수를 대입함으로써 variable2가 variable의 메모리 주소 0x0004를 참조함.
3. 자바스크립트 원시 타입을 변경 할 땐 항상 새로운 메모리 주소를 할당 받는다. 따라서 새 메모리 주소 0x0008를 할당받고 값(124)이 저장됨.

 

Virtual Machine

자바스크립트 엔진은 가상머신으로 구성된다.
참조 타입이 들어가는 Heap과 원시 타입이 들어가는 Call Stack으로 나뉜다.

let a = 10;		// call stack
const b = 20;		// call stack
const arr = [];		// heap
arr.push(5);
arr.push(3);
arr.push(1);

위 코드 설명

- 배열은 Object타입이므로 참조 타입으로 분류, 따라서 Heap에 배열영역 생성
- Call Stack에 생성된 arr 변수는 Heap에 생성된 배열 영역 주소를 참조
- Heap은 동적으로 크기가 달라지므로 const로 선언을 해도 값을 추가, 제거 등 할 수 있음

 

가비지 컬렉션

자바스크립트는 도달 가능성이라는 개념을 사용해 메모리 관리를 수행한다.

쉽게 말해서, 메모리가 어떤 값을 참조하고 있으면 그 값은 가비지 컬렉터에 의해 삭제되지 않는다. 그 값을 도달 가능한 값 이라고 한다.

예시를 보면 쉽게 이해할 수 있다.

let user = {
  name: "Woogie"
};

전역변수 user 는 {name : "Woogie"}라는 객체를 참조한다. 참조하고 있기 때문에 가비지 컬렉터가 삭제하지 않는다.

이제 user 의 값을 다른 값으로 덮어쓰면 참조가 사라진다.

user = null;

이렇게 되면 객체 {name: "Woogie"}는 도달할 수 없는 상태가 되었다. 이 객체에 접근할 방법도, 어느 변수가 참조하고 있지 않기 때문에 가비지 컬렉터에 의해 삭제되고, 메모리에서 삭제한다.

 

 

---

프로그래머스 데브코스

가비지 컬렉션