웹브라우저 동작원리

https://youtu.be/v67LloZ1ieI

=========================

코드를 잘 짜고 싶으면 문법 말고도 동작원리 배워두면 좋다

님이 작성한 HTML, CSS, JS 해석해주는 엔진이 브라우저

 

근데 브라우저는 자바스크립트를 해석하는 순서같은게 좀 이상하다

 

파이썬은

JS는

2+2도 저 안에 넣어야되고(아니면 바로 출력됨)

3+3이 먼저 출력됨

 

보통 프로그래밍 언어랑 다르다

뭔가 처리가 빨리 되는것부터 실행하는 느낌

병렬처리는 아니고

동작원리 알면 이해됨

 

=========================

Stack과 Heap이 있다

Stack안에 코드를 집어넣고 한줄 한줄 실행한다.

코드 실행할 때 변수를 만나면

여기서 갖다 씀

 

이렇듯 원래는 병렬처리 못함.

 

근데?

저런애들은 바로 실행할 수가 없는 코드라서

 

잠깐 대기실로 감

 

이렇게 제껴놓는 코드들이 정해져 있음.

 

 

대기실 코드들

Queue에 줄을 세우고 하나씩 Stack으로 보냄

 

Stack이라는 공간은 원래 바쁜 공간이라서 거치는 것

 

근데?

비었어? 하나 보내고 실행하고

그럼 비었어? 다시 하나 보내고 실행하고

 

0초면?

setTimeout같은거 무조건 대기실로 가기 때문임. + Stack이 비어있을 때만 올려보냄

이기 때문

 

이걸 알면?

JS로 짜면 안되는 코드들 : 반복문 천만개, 10초 20초 걸리는거, 자바스크립트로 어려운 수학계산 시키면 스택에서 10초간 실행이되는데, 그 중간에 ajax요청, 버튼 클릭, setTimeout작동 이런거 안됨

 > 이런 이벤트 리스너 등의 코드들은 대기실 거쳐서 Queue에서 Stack으로 올라온다고 했으니까

 > Stack이 비었을 때만 올려보내니까 10초동안 스택이 안비니 못올려보냄

 

언어마다 다른게 이런거구나..!

이런 화면 띄움, 브라우저 프리징

 

교훈

 > 버튼 하나에 이벤트를 100개 1000개 달아놓으면 안된다 이 말 ( queue에도 쌓이고 stack에도 올려보내야해 )

 > 동기적 vs 비동기적

 : JS는 원래 동기적으로 처리가 됨. 동기적 == 한번에 한줄 순서대로 코드가 실행이 된다는 소리 == stack은 하나니까요

 > JS는 가끔 비동기적으로 처리도 할 수가 있다 setTimeout, 이벤트리스너, ajax함수 같은걸 쓰면 비동기적인 처리를 할 수가 있는거예요 오래걸리는 처리는 제껴두고 빨리 되는거 먼저 실행을 할 수가 있다는 말. 이런 함수들은 대기실을 거쳐서 이게 완료가 되면 실행을 하라고 올려보내니까