Prompt for unload
어떤 페이지를 보고 있다가 다른 페이지로 이동할 때 발생. 해당 페이지에 이제 unload 할 거라는 신호를 준다. onbeforeunload 이벤트가 이 시점에 발생.
Redirect
요청한 URL에서 Redirection 신호를 보낼 때 발생. 노란색 부분은 웹 페이지를 읽어들이기 전이기 때문에 JS 이벤트가 없음.
AppCache
실제로 서버에서 데이터를 읽어오기 전에 브라우저 캐시에 저장된 데이터가 있는지 확인.
DNS, TCP, Request, Response
네트워크 단계. 네임서버를 조회하고 서버로 요청을 보내고 받아오는 부분까지. 이제서야 파일을 받아온 것.
Processing
받아온 파일을 브라우저에서 처리. 파싱하고 렌더링하는 것까지 포함. domInteractive. HTML 파일은 다 읽고 파싱도 끝난 단계. 아직 서브 리소스는 안 읽음
Load
CSS, 이미지, 동영상 등 필요한 리소스를 모두 다운로드 받고 읽어들인 상태. window의 load 이벤트 발생
사용자 인터페이스
화면에서 웹 페이지를 제외하고 사용자가 인터랙션 할 수 있는 영역. 주소 표시줄, 북마크, 앞으로/뒤로 가기 버튼 등이 이에 해당.
브라우저 엔진
사용자 인터페이스와 렌더링 엔진의 다리 역할. 둘 사이의 동작을 제어.
렌더링 엔진
실질적으로 웹 페이지를 표현하는 부분. HTML, CSS, JS를 읽고 해석하고 화면에 그림. 네트워크 상에 있는 여러 리소스를 읽으려면 통신도 해야하고 HTML을 해석하다가 script 태그가 나오면 자바스크립트도 해석해야 하니까 JS 해석기와도 통신해야 한다.
통신
HTTP 요청과 같은 네트워크 호출에 사용됨.
데이터 저장소
쿠키, 파일 등의 데이터 저장을 담당.
이 모든 과정이 점진적으로 실행됨.
전부 다 파싱할 때까지 기다리지 않고 어느 정도 읽어들였으면 객체로 변환해서 화면에 그려내기를 반복.
이유는 더 나은 사용자 경험을 위해서. 만약 모든 리소스를 전부 다운로드할 때까지 화면에 아무 것도 안 나타나면 엄청 답답할 것. (좋은 사용자 경험 X)
그리고 쓰레드가 하나라 앞 단계로 가면 뒷 단계는 멈춤. 그러니 새로운 CSS 파일을 읽어서 표시하는 것도 렌더링을 차단할 수 있음.
CSS나 JS를 한 번에 읽도록 번들링하는 이유도 찔끔찔끔 로딩해서 자꾸 렌더링 방해하지 말고 한꺼번에 전부 로딩해서 성능을 올리라는 뜻.
불필요한 레이아웃은 줄일수록 좋다.
