Frontend/javaScript

웹 페이지 로드 과정

dddzr 2023. 1. 8. 23:58

웹 페이지 로드 과정

 

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이벤트 이용)

iframe을 display: none으로 추가하고 load완료 후 show해주면서 화면이 깜빡이는 것을 방지할 수 있음. form생성 전에 로딩창을 띄우고 load완료 후 숨겨줌. function functionOpen(functionName){ var functionInfo = functi

sumni.tistory.com

 

2. beforeunload, unload 이벤트

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

https://sumni.tistory.com/85

 

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

[요구사항] 1. mian 페이지에서 subPage를 오픈. 2. 어떤 페이지에서 로그아웃되면 전체 페이지에서 로그아웃 (한 창만 로그아웃화면으로 이동하고 나머지는 닫음) 3. 부모창을 닫으면 자식창도 닫침.

sumni.tistory.com