자바스크립트 삽입방식
자바스크립트를 실행하는 방법은 문서안에 <script> 태그를 이용해 작성하거나 외부의 스크립트 파일을 링크하는 것이다.
<script type="text/javascript">
//코드내용
</script>
<script type="text/javascript" src="링크주소"></script>
type="text/javascript"부분은 HTML5에서는 생략할 수 있다.- 문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다.
- 전자의 경우는 간단한 스크립트의 경우이거나 해당 문서에만 적용되는 코드들, 초기화등에 자주 사용된다.
- 후자의 경우는 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 링크해 사용되곤 한다. 이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식이다.
자바스크립트 삽입 위치
브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료이 완료될때까지 브라우저 렌더링을 멈추게 된다.
즉, 자바스크립트의 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미친다는 것이다.
head에 삽입되는 경우
<head>
<script>
//코드내용
</script>
</head>
- 브라우저 렌더링에 방해가 되어 무거운 스크립트가 실행되는 경우 오랫동안 완성되지 못한 화면을 노출하게 된다.
- 문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용된다.
- 문서의 DOM(Document Object Model) 구조가 필요한 스크립트의 경우
document.onload와 같은 로드 이벤트가 추가되어야 에러없이 작동된다.
</body> 앞에 삽입되는 경우
.....
<script>
//코드내용
</script>
</body>
- 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되기에 콘텐츠를 변경하는 스크립트의 경우 화면에 노출된체로 변화된다.
- 대부분의 스크립트의 위치로 추천되는 위치이다.
- 문서의 DOM 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요없다.
'웹코딩 > Javascript' 카테고리의 다른 글
| 문서의 로드시점 - onload, DOMContentLoaded (6) | 2016.04.04 |
|---|---|
| 스크립트 모듈화 - Require.js #1 (0) | 2016.04.01 |
| ECMAScript 6 특징 정리 링크들 (0) | 2016.03.15 |
| 자바스크립트 (ECMAScript) 버전 (4) | 2016.03.14 |
| 다시 공부하는 자바스크립트 (2) | 2016.03.01 |
