JS와 브라우저 동작 원리 (비동기, 스택, 큐, 이벤트루프)

horiz.d·2022년 7월 6일
0

JS 꿀단지

목록 보기
35/35

js코드는 웹브라우저가 돌려주기 때문에, 브라우저 동작 원리를 이해해야 한다.


JS의 비동기 처리 특징

js는 일반적으로는 동기적 처리 원칙을 가지고 있지만, setTimeout, 이벤트리스너, ajax 함수 등에 한해서 비동기적 처리를 수행한다.

#파이썬 코드 : 동기 처리 : 절차 지향

print(1+1)
time.sleep(1)
print(2+2)
// JS코드 : 비동기 처리를 고려한 코드 : 절차 지향이 아님

console.log(1+1)
setTimeout( function(){ console.log(2+2) }, 1000 )
//setTimeout( function(){ console.log(2+2) }, 1000 )
console.log(3+3)


// 결과출력 
// 2
// 6
// 4
	//-> 이유 : js는 비동기로 빨리 처리되는 코드 순서로 감




웹 브라우저의 실행 구조


스택

코드 동작 실행부의 구조가 단일의 Stack임(=싱글 스레드)

Variable Object가 저장되는 구조로, stack의 코드가 실행되기 위해 요구되는
미리 저장된 변수값 등이 heap에 저장되어 필요시 값을 넘겨줌

js의 특수 비동기 처리 특성 때문에, 즉시 수행될 수 없는 코드동작은 실행부인 스택에서 대기열인 큐로 이동됨,
그리고 스택에 쌓여있던 코드가 모두 실행되면 대기열 큐에서 다시 스택으로 이동하여 처리됨.

  1. Ajax 요청 코드
  2. setTimeout()
  3. 이벤트 리스너

위 처럼 즉시 동작할 수 없는 특정 코드들이 큐로 넘겨져 대기하게 됨.
적어도 위의 세가지는 '무조건' 큐로 이동하는 코드명령임.

스택이 텅 비면, 큐의 선입선출 특성답게 대기열 입장순서대로 스택에 다시 돌아감.


-> 이런 구조적 특성을 고려할 때, 스택에서 복잡하고 연산 시간이 오래걸리는 js코드를 작성 시, 다음 동작에 대한 응답 대기 시간이 과하게 길어질 수 있으므로 지양해야 함. 큐 또한 너무 바쁘게 만들면 안된다.

profile
가용한 시간은 한정적이고, 배울건 넘쳐난다.

0개의 댓글