웹 페이지 로드 과정

웹 페이지 로드 과정

 

Prompt for unload

• 페이지를 벗어날 때(다른 페이지로 이동할 때) 발생한다.
• unloadEventStart에서 window에 beforeunload 이벤트가 발생한 후 unload 이벤트가 발생한다.

Redirect (redirectStart, redirectEnd)

• 서버쪽에서 redirect 신호가 오면 발생한다.(HTTP code 301, 302)
• optional이라서, 발생하지 않을 수 도 있음.

AppCache

• 서버에서 데이터를 받아오기 전에 브라우저에 캐시가 있는지 확인

 

내부 네트워크 처리 단계(DNS, TCP, Request, Response)

DNS(domainLookupStart, domainLookupEnd)

• DNS에 요청을 보내기 전에 먼저 브라우저에 해당 Domain이 cache돼 있는지 확인
• (Chrome의 경우 chrome://net-internals/#dns 에서 확인 가능)
• 없을 경우, 로컬에 저장돼 있는 hosts파일에서 참조할 수 있는 Domain이 있는지 확인
• 없을 경우, 마지막으로 네임서버를 조회해서 서버의 실제 IP를 확인

*hosts file

호스트 이름에 대응하는 IP 주소가 저장되어 있어서 도메인 이름 시스템(DNS)에서 주소 정보를 제공받지 않고도 서버의 위치를 찾게 해주는 파일.

TCP (connectStart, secureConnectionStart, connectEnd)

• DNS단계에서 알아낸 IP를 통해 TCP로 서버에 연결(TCP 통신을 통해 Socket을 연다)

Request (requestStart, requestEnd)

• HTML 문서에 대한 요청

Response (responseStart, responseEnd)

• Response의 첫번째 바이트가 수신한 직후 응답 시간 체크. (start)
• 마지막 바이트를 받은 직수 응답 완료 시간 체크. (end)
• 웹페이지에서 사용할 HTML 파일을 받음

Processing 

• 웹 페이지 파일을 파싱하는 과정 (html, css, js, 이미지, 폰트 등등)
• domInteractive : 모든 HTML 및 DOM 생성 작업이 완료
  • readystatechange 이벤트 발생
  • 로딩화면 구현에 종종 사용된다.
• domContentLoadedEvent :
  •  DOM 트리를 만들고, 화면에 그리기 전에 JavaScript를 주입
  • domContentLoaded 이벤트 발생
  • 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않음.
• domcomplete : 페이지 및 해당 하위 리소스가 모두 준비된 시점

Load

• CSS, 이미지, 동영상 등 필요한 리소스를 다운로드 받는다.
• load 이벤트를 발생
• HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생.

 

이벤트 활용

1. Load이벤트: 화면을 불러올 때 loading창 띄우기

페이지 전체 뿐 아니라 부분페이지를 불러오는 ifram에서도 사용가능

https://sumni.tistory.com/82

Iframe 깜빡임 방지 및 로딩창(load이벤트 이용)

 

2. beforeunload, unload 이벤트

화면을 떠나기 전 컨펌창 띄우기, 로그아웃

https://sumni.tistory.com/85

window.close (부모window, 자식window 닫기)