이벤트 처리 시점
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에 의존하고 있다고 말한다. 이것을 자바스크립트의 의존성이라고 한다.
2. 브라우저의 HTML, CSS, JavaScript 해석 흐름
<script>를<head>안에서 사용 시, HTML 해석이 멈춘다. 사용자 경험(UX)을 고려했을 때 사용에 주의가 필요하다.페이지가 로딩되는 시간이 길어질수록 사용자에게 최악의 UX를 제공하게 된다.
<script>와 달리<link>는 HTML의 파싱을 방해하지 않는다.
3. Load 이벤트
이미지까지 모두 로드한 후 실행된다.
Network패널의load와 이벤트 유형의load는 같다.예)
load: 1.33초라고 할 때, 1.33초 후에init함수를 실행해 달라!
4. DOMContentLoaded 이벤트
문서객체구조가 완성되면 실행된다.
4-1. 가장 권장되는 <script>위치
<script>위치<body>의 끝자락에서 사용하는 것을 권장
HTML 해석(parsing)이 완료되면 바로 실행(페이지의 이미지는 <script>가 실행되고 다운 받아짐, load 이벤트와의 차이)
5. async 속성과 defer 속성 차이
async 속성과 defer 속성 차이<script>코드를<head>내에서 불러온다면<head>의 끝자락에 사용하는 것을 권장<script>보다<link>가 나중에 마크업 되면<script>가 다운되어 실행되는 동안<link>가 서버에 요청되지 않아 HTML 페이지는 구조만 보이게 된다.
5-1. defer 속성
defer 속성defer연기시키다defer속성을 사용하면<head>내에서<script>를 사용해서 HTML 해석(parsing)이 지연되는 걱정없이 작동이 된다.<script>가 다운 되더라도 HTML 해석을 방해하지 않는다. 그리고 모든 것이 준비가 끝나면<script>가 실행된다.
5-2. async 속성
async 속성비동기(Asynchronous)의 줄임말
6. 동기와 비동기
6-1. 비동기 (asynchronous)
기다림이 없음
실행 중인 작업이 끝나지 않아도 동시에 다른 작업도 같이 실행할 수 있다.
붕뜨는 대기시간 즉, 버려지는 시간이 없다
예)
async,defer속성defer: DOM에 관련한 것을 제어할 때 사용하면 좋다.
6-2. 동기 (synchronous)
기다림이 있다
동시에 실행 불가능하다. 한 작업이 끝이 나야 다른 작업을 할 수 있다.
다음 작없은 전의 작업이 끝날 때까지 대기해야 한다.
예)
<script>
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초이다.
8. 참고
Last updated
Was this helpful?