자바스크립트
자바스크립트 삽입방식
자바스크립트를 실행하는 방법은 문서안에 <script> 태그를 이용해 작성하거나 외부의 스크립트 파일을 링크하는 방식 2가지가 존재한다.
<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 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요없다.
스크립트의 실행
기본적으로 <script>는 인라인 코드의 경우 즉시 해석되고 실행될 수 있지만 그렇지 않은 경우는 해당 파일을 가져올 때까지 HTML 문서의 구문 분석을 중단한다.
async 속성이 추가된 경우의 실행
async 속성은 브라우저에 스크립트 파일이 비동기적으로 실행될 수 있음을 나타내기 위해 사용된다.
HTML 구문 분석기는 스크립트 태그에 도달한 지점에서 스크립트를 가져오고 실행하기 위해 일시 중지 할 필요가 없다.
따라서 HTML 구문 분석과 병행하여 스크립트를 가져온 후 스크립트가 준비 될 때마다 즉시 실행이 가능하다.
그러므로 실행의 순서가 다운로드 완료 시점의 결정되므로 실행 순서가 중요한 스크립트들에 async를 사용할 때는 유의해야 한다(HTML5 spec에 async=false 속성 지정시 호출 순서대로 실행되도록 추가됨(default : true)).
<script async src="script.js">
defer 속성이 추가된 경우의 실행
defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시한다.
<script defer src="script.js">비동기적으로 로드된 스크립트와 마찬가지로, HTML 구문 분석이 실행되는 동안 파일을 다운로드 할 수 있다.
HTML 구문 분석이 완료되기 전에 스크립트 다운로드가 완료 되더라도 구문 분석이 완료 될 때까지 스크립트는 실행되지 않는다.
async와는 다르게 호출된 순서대로 실행된다.
