search

이벤트 처리 시점

hashtag
1. 스크립트 의존성(Dependecy)

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="../helper.js" defer></script>
  <script src="./index.js" defer></script>
  <title>스크립트 의존</title>
</head>

자바 스크립트 의존성이란?

helper.js에 있는 헬퍼 함수를 index.js에서 사용하게 된다면 helper.js를 먼저 불러와야 index.js에서 사용한 헬퍼 함수가 제대로 실행된다. 이때 ], index.js가 helper.js에 의존하고 있다고 말한다. 이것을 자바스크립트의 의존성이라고 한다.

hashtag
2. 브라우저의 HTML, CSS, JavaScript 해석 흐름

  • <script>를 <head> 안에서 사용 시, HTML 해석이 멈춘다. 사용자 경험(UX)을 고려했을 때 사용에 주의가 필요하다.

  • 페이지가 로딩되는 시간이 길어질수록 사용자에게 최악의 UX를 제공하게 된다.

  • <script>와 달리 <link>는 HTML의 파싱을 방해하지 않는다.

circle-info

HTML 해석이 멈추는 이유?

HTML을 해석을 하다가 <script>를 만나면 HTML문서 해석을 멈춘 뒤, <script> 파일을 해석하고 불어오고 실행한다. 그리고나서 실행이 완료된 후에, 다시 HTML 문서를 해석한다.

hashtag
3. Load 이벤트

  • 이미지까지 모두 로드한 후 실행된다.

  • Network패널의 load와 이벤트 유형의 load는 같다.

  • 예) load: 1.33초라고 할 때, 1.33초 후에 init함수를 실행해 달라!

hashtag
4. DOMContentLoaded 이벤트

문서객체구조가 완성되면 실행된다.

hashtag
4-1. 가장 권장되는 <script>위치

<body>의 끝자락에서 사용하는 것을 권장

HTML 해석(parsing)이 완료되면 바로 실행(페이지의 이미지는 <script>가 실행되고 다운 받아짐, load 이벤트와의 차이)

hashtag
5. async 속성과 defer 속성 차이

  • <script>코드를 <head> 내에서 불러온다면 <head>의 끝자락에 사용하는 것을 권장

  • <script>보다 <link>가 나중에 마크업 되면 <script>가 다운되어 실행되는 동안 <link>가 서버에 요청되지 않아 HTML 페이지는 구조만 보이게 된다.

hashtag
5-1. defer 속성

  • defer 연기시키다

  • defer 속성을 사용하면 <head> 내에서 <script>를 사용해서 HTML 해석(parsing)이 지연되는 걱정없이 작동이 된다.

  • <script>가 다운 되더라도 HTML 해석을 방해하지 않는다. 그리고 모든 것이 준비가 끝나면 <script>가 실행된다.

hashtag
5-2. async 속성

비동기(Asynchronous)의 줄임말

hashtag
6. 동기와 비동기

hashtag
6-1. 비동기 (asynchronous)

  • 기다림이 없음

  • 실행 중인 작업이 끝나지 않아도 동시에 다른 작업도 같이 실행할 수 있다.

  • 붕뜨는 대기시간 즉, 버려지는 시간이 없다

  • 예) async, defer 속성

  • defer: DOM에 관련한 것을 제어할 때 사용하면 좋다.

hashtag
6-2. 동기 (synchronous)

  • 기다림이 있다

  • 동시에 실행 불가능하다. 한 작업이 끝이 나야 다른 작업을 할 수 있다.

    다음 작없은 전의 작업이 끝날 때까지 대기해야 한다.

  • 예) <script>

hashtag
7. 메모

  • 개발자 도구(Devtools) → Netwaork 패널 → 필터 모두 체크!

  • 페이지에 연결돤 HTML, CSS 파일 이미지 등을 확인 할 수 있으며, 그 파일들이 전부 로딩되는 데까지 걸린 시간을 확인 할 수 있다.

  • 20 requests : 서버에 20개의 데이터를 요청했다.

  • 4.4 MB transrerred : 4.4 MB 전송되었다.

  • Finish 1.33s: 현재 페이지를 사용자가 사용하는데 걸리는 시간이 1.33초이다.

  • DOMContentLoaded 98ms : DOMContentLoade에 걸린 시간 0.98초이다.

  • Load 1.33s : 전체 파일을 읽어들이는데 걸린 시간은 1.33초이다.

hashtag
8. 참고

Previous키보드 이벤트 핸들링Next이벤트 위임

Last updated