JS런타임
- js엔진이 js파일을 해석한 후 변수는 heap에, 함수 실행은 stack에 저장한다.
- 함수가 실행될 때에는 다른 동작은 할 수 없고, 실행이 끝나면 해석 결과를 Rendering Engine에 전달해 필요에 따라 다시 렌더링한다.(함수는 한번에 하나만 실행 가능)
- web Api가 실행될 경우 콜백함수를 브라우저에 등록한다. (stack에선 없어짐)
- 실행 조건이 만족됐을 경우 이벤트 핸들러나 time관련 콜백은 Task Queue에, 서버 요청 콜백은 Micro Queue에 집어넣는다.
- Event Loop가 돌면서 Stack이 모두 비워져있는 걸 확인하면 queue에 있는 함수를 하나씩 꺼내서 stack에 집어넣어 실행시킨다.
- Micro Queue는 모두 비워질 때까지 계속 stack에 넣어 실행시킨다.
브라우저 렌더링 과정
첫 렌더링
- HTML을 파싱하고 js해석 결과를 반영해 DOM Tree생성
- CSS를 파싱해 DOM Tree에 Css정보를 합쳐 CSSOM 생성
- DOM Tree와 CSSOM을 합치고, 보여지는 것들로만 추려 Render Tree생성
- 상대적인 수치를 절대적인 px로 바꿔 요소들의 위치와 크기를 계산함
- 계산된 위치와 크기에 맞춰 실제로 그리는데, 레이어를 생성해서 그림
- 레이어들을 배치함
리렌더링
- 애니메이션이나 JS를 이용한 조작으로 style이 바뀌게 되면 css속성이나 js코드, 브라우저 크기 변경에 따라 3가지 경우에 따라 다시 그려지게 됨
- Layout부터, Paint부터, Composite부터
- 화면에 보여지는 것이 달라지면 렌더트리부터 구축할 수 있음
- 단계가 적을수록 좋음
- 리렌더링 단계가 적은 css속성을 골라써야 성능을 개선할 수 있음
참고링크
https://leehyungi0622.github.io/categories/JavaScript/
https://present.do/presentations/6187b87b8eb0d57ea69fd5ac?page=11
https://www.youtube.com/watch?v=sJ14cWjrNis&list=PLgXGHBqgT2TvpJ_p9L_yZKPifgdBOzdVH&index=58
#프론트엔드