HTML에서 JS 로드하는 방법
1. Inline
-
정보와 제어가 섞여있다.
-
onclick의 속성에는 JS코드가 들어와야 브라우저가 인식한다.
<body>
<input type="button" onclick="alert('hello world')" value="hello world" />
</body>2. Internel
-
HTML에서
script태그안에 JS 코드를 넣어서 연결한다. -
HTML의
head혹은body안에 위치할 수 있다.
<body>
<input type="button" id="hw" value="Hello world" />
<script>
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
})
</script>
</body>3. External (linking)
-
JS 파일을 만들어서
src="파일위치"로 연결한다. -
JS코드의 재활용성, 캐쉬를 통한 속도향상, 전송량의 경량화
<body>
<input type="button" id="my-button" value="Hello world" />
<script type="text/javascript" src="script1.js"></script>
</body>// 파일명 script1.js
var hw = document.getElementById('my-button');
hw.addEventListener('click', function(){
alert('Hello world');
})
// 버튼을 클릭하면 Hello world 경고창이 뜬다.script 의 위치
script가 head 태그 안에 있을 때
-
동기식 처리로 JS를 로드하는 동안 HTML 파싱이 멈춘다.
-> 브라우저 렌더링에 방해가 되어 완전하지 않은 화면이 보여 질 수 있다.
-
JS 로드과정 : 1. 다운로드 (fetching) 2. 실행 (execution)
-
documnet.onload와 같은 로드 이벤트를 추가해야 에러없이 작동된다.
-> 전체 문서가 로드되면 JS가 로드 된다. -
비동기식 처리로 접근하기 (
async,defer)
async 속성 이용
<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>-
HTML 파싱이 멈추지 않고 script를 다운로드한다.
-
HTML 파싱을 멈추고 다운로드된 순서대로 script를 실행한다.
defer 속성 이용
<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>-
HTML 파싱이 멈추지 않고 script를 다운로드한다.
-
HTML 파싱이 완료되면 작성한 순서대로 script를 실행한다.
script가 body 태그 안에 있을 때
body의 끝부분에script를 위치시키면 된다.
-> 전체 문서가 로드되면 JS가 로드 된다.
-> 스크립트나 스타일시트가 무겁다면 JS의 로드가 늦어진다.
개발자가 될 팔자