Javascript – 효과적인 외부 *.js 파일 포함 과 실행시점
Javascript – 포함방법과 위치 그리고 처리 시점
ㆍjavascript 파일 포함하기
<!DOCTYPE Html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” src=”normal.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” src=”normal.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
1) <!DOCTYPE Html> // Html 파싱 시작
2) <script src=”normal.js”></script> // Html 파싱 멈춤(block)
3) normal.js // 다운로드 // Html 파싱 멈춤(block)
4) normal.js // 실행 // Html 파싱 멈춤(block)
5) // HTML 파싱 재시작
6) DOM loaded – Page Ready
3) normal.js // 다운로드 // Html 파싱 멈춤(block)
4) normal.js // 실행 // Html 파싱 멈춤(block)
5) // HTML 파싱 재시작
6) DOM loaded – Page Ready
<!DOCTYPE Html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
</head>
<body>
<div>
HTML 코드
</div>
<script laguage=”javascript” src=”normal.js”></script>
</body>
</html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
</head>
<body>
<div>
HTML 코드
</div>
<script laguage=”javascript” src=”normal.js”></script>
</body>
</html>
1) <!DOCTYPE Html> // Html 파싱 시작
2) <head> ~ <body><div>~</div> // Html 파싱
2) 하단 <script src=”normal.js”></script> // Html 파싱멈춤 (block)
3) normal.js // 다운로드 // Html 파싱 멈춤(block)
4) normal.js // 실행 // Html 파싱 멈춤(block)
5) normal.js 이후의 HTML 파싱 재시작
6) DOM loaded – Page Ready
2) 하단 <script src=”normal.js”></script> // Html 파싱멈춤 (block)
3) normal.js // 다운로드 // Html 파싱 멈춤(block)
4) normal.js // 실행 // Html 파싱 멈춤(block)
5) normal.js 이후의 HTML 파싱 재시작
6) DOM loaded – Page Ready
<!DOCTYPE Html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” defer src=”normal.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” defer src=”normal.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
1) <!DOCTYPE Html> // Html 파싱 시작
2) <script language=”javascript” src=”normal.js”></script> // Html 파싱계속됨
3) normal.js // 다운로드 // Html 파싱계속됨
4) normal.js // 실행대기 // Html 파싱계속됨
5) // Html 파싱계속됨 – 모든 HTML 파싱 끝
6) normal.js // 실행
7) DOM loaded – Page Ready
3) normal.js // 다운로드 // Html 파싱계속됨
4) normal.js // 실행대기 // Html 파싱계속됨
5) // Html 파싱계속됨 – 모든 HTML 파싱 끝
6) normal.js // 실행
7) DOM loaded – Page Ready
<!DOCTYPE Html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” async src=”normal.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” async src=”normal.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
1) <!DOCTYPE Html> // Html 파싱 시작
2) <script language=”javascript” src=”normal.js”></script> // Html 파싱계속됨
3) normal.js // 비동기 다운로드 // Html 파싱계속됨
*) normal.js // 실행됨(비동기-다운완료시 아무때나) // Html 파싱 멈춤(block)
5) 모든 Html 파싱 끝남
7) DOM loaded – Page Ready
2) <script language=”javascript” src=”normal.js”></script> // Html 파싱계속됨
3) normal.js // 비동기 다운로드 // Html 파싱계속됨
*) normal.js // 실행됨(비동기-다운완료시 아무때나) // Html 파싱 멈춤(block)
5) 모든 Html 파싱 끝남
7) DOM loaded – Page Ready
<!DOCTYPE Html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” async src=”normal1.js”></script>
<script laguage=”javascript” async src=”normal2.js”></script>
<script laguage=”javascript” async src=”normal3.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
<html lang=”ko”>
<head>
<meta charset=”utf-8″/>
<script laguage=”javascript” async src=”normal1.js”></script>
<script laguage=”javascript” async src=”normal2.js”></script>
<script laguage=”javascript” async src=”normal3.js”></script>
</head>
<body>
<div>
HTML 코드
</div>
</body>
</html>
1) <!DOCTYPE Html> // Html 파싱 시작
2) <script language=”javascript” src=”normal.js”></script> // Html 파싱계속됨
3) normal1.js // 비동기 다운로드 // Html 파싱계속됨
4) normal2.js // 비동기 다운로드 // Html 파싱계속됨
5) normal3.js // 비동기 다운로드 // Html 파싱계속됨
6) normal1 ~ 3.js 비동기(병렬)로 다운받는 동안 // Html 파싱계속됨
7) normal1 ~ 3.js 중 먼저 다운로드된 js 바로실행, 실행 중 Html 파싱 멈춤(block)
5) 모든 Html 파싱 끝남
7) DOM loaded – Page Ready
2) <script language=”javascript” src=”normal.js”></script> // Html 파싱계속됨
3) normal1.js // 비동기 다운로드 // Html 파싱계속됨
4) normal2.js // 비동기 다운로드 // Html 파싱계속됨
5) normal3.js // 비동기 다운로드 // Html 파싱계속됨
6) normal1 ~ 3.js 비동기(병렬)로 다운받는 동안 // Html 파싱계속됨
7) normal1 ~ 3.js 중 먼저 다운로드된 js 바로실행, 실행 중 Html 파싱 멈춤(block)
5) 모든 Html 파싱 끝남
7) DOM loaded – Page Ready
여담,
7) DOM loaded – Page Ready – DOM 요소들만으로 구성되어있다.
(이미지 ,동영상 음성 등은 없다.)
8) 페이지에 필요한 이미지 및 영상 ,음성파일들을 가져온다.
9) 페이지를 로딩한다.
10) windown.onload() 이벤트 발생
(이미지 ,동영상 음성 등은 없다.)
8) 페이지에 필요한 이미지 및 영상 ,음성파일들을 가져온다.
9) 페이지를 로딩한다.
10) windown.onload() 이벤트 발생
jQuery 에서는,
$(document).ready( function() { } ) // 권장하지않음
$(function(){ }); // 권장방법
$(document).ready Event는 1.8 버전에서는 deprecated 되었으며,
3.0에서는 더 이상 지원하지않는다.
바닐라 javascript 에서는이벤트 목록에 등록방법
document.addEventListener(“DOMContedLoaded” , function(){ });
document.addEventListener(“DOMContedLoaded” , function(){ });
Views Today : 10
Views Yesterday : 31
Views This Month : 1329
Views This Year : 8623
Total views : 44663
Who's Online : 0