web동작원리

🥕 웹 브라우저란?

자바스크립트를 실행시켜주는 엔진이다.
즉, 브라우저가 코드를 해석해주는 것이다.
( HTML, CSS, JavaScript를 해석해주는 엔진)

 

🥕동기적  vs  비동기적 ?

 - 동기적

동기적인 작업은 순차적으로 실행됨. 한 작업이 시작되면 그 작업이 완료될 때까지 다음 작업이 대기.

ex) 코스요리 : 차례대로 먹어야 다음을 먹을 수 있음

- 비동기적

비동기적인 작업은 순차적으로 실행되지 않음. 한 작업이 시작되면 다음 작업이 기다리지 않고 즉시 실행됨.

ex) 고기집 : 목살,삼겹살 먹다가 라면 먹다가 동시에 다함.

🥕 자바스크립트 (싱글 스레드)

자바스크립트는 원래 동기적으로 처리되는 언어이다.

( 한 번에 한 가지 일 밖에 처리할 수 없다 )

=> 이렇게 되면 브라우저에서 오래 걸리는 작업이 실행될 경우, 웹 페이지의 UI는 멈춰버리고, 사용자는 어떠한 행동도 할 수 없게 됨

하지만 가끔 setTimeout과 같은처리처럼 비동기적인 처리도 가능!

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

=> 빠른것부터 실행이됨!!

동작원리를 알아보자!

Stack

• 데이터를 차곡차곡 쌓아올린 형태의 자료구조 ( 시간의 순서에 따라 자료가 쌓임)
• 후입선출의 특징을 가짐
• 가장 최근에 호출된 함수가 가장 먼저 실행되고 제거된다는 의미

 

먼저 Stack 이라는 공간에는 구현한 코드가 한줄 한줄 쌓인다.

구현한 코드 내에 선언한 변수들은 Heap이라는 공간에 쌓인다. 

 

Stack은 하나 뿐이기때문에 한 번에 코드 하나밖에 실행할 수 없다.

 

그럼 setTimeout 은 어떻게 처리가 될까?

setTimeout처럼 바로 처리할 수 없는 함수들은 대기실(Heap)같은 곳에 들어감.

=> setTimeout의 2초가 지난 경우,

대기실에서 코드를 옮겨와야하는데

바로 Stack에 담기는 것이 아닌 Queue에 대기가 끝난 코드가 순서대로 쌓인다.

=>그리고  queue > stack으로 옮겨가게되는데

Stack이 비어있을 경우에만 하나씩올려 실행하며 동작하다!

Memory Heap (대기실)

데이터를 임시 저장하는 곳으로, 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장함

Queue

= 대기줄

• 데이터(data)를 입력된 순서대로 처리할 때 주로 사용하는 자료구조
• 선입선출의 특징을 가짐 ( 먼저 넣은 데이터가 먼저 나옴)
• ex) 고속도로에서 자동차들은 진입한 순서대로 통행료를 내고 톨게이트를 통과함

큐 자료구조는 각 장치 사이에 존재하는 속도의 차이나 시간의 차이를 극복하기 위해 사용된다.

이것을 통틀어 버퍼(buffer)라고 함