JavaScript/코드 배치

`script` 요소

HTML 문서에 배치될 때 모든 자바 스크립트는 script요소 내에 있어야 한다. script요소는 외부 자바 스크립트 파일에 연결하거나 인라인 스크립팅(HTML 파일의 스크립트 단락)을 포함하는데 사용된다. 외부 자바스크립트 파일에 연결하는 요소는 다음과 같다.

<script src="script.js"></script>

인라인 자바 스크립트가 포함된 script요소는 다음과 같다.

<script>
  // JavaScript code here
</script>

인라인 스크립팅은 HTML과 자바 스크립트가 모두 하나의 파일에 있다는 장점이 있으므로 빠른 개발 및 테스트에 편리하다. 자바 스크립트를 별도의 파일에 넣는 것은 잠재적으로 둘 이상의 페이지에서 사용할 수 있는 자바 스크립트 함수에 권장되며 콘텐츠를 동작과 분리하는 데에도 사용된다.

인라인 자바 스크립트

인라인 자바 스크립트를 사용하면 동일한 페이지 내에서 HTML과 자바 스크립트로 쉽게 작업할 수 있다. 이것은 일반적으로 일부 아이디어를 일시적으로 테스트하고 스크립트 코드가 해당 한 페이지에만 적용되는 상황에서 사용된다.

<script>
  // Write your JavaScript code here
</script>

인라인 HTML 주석 마커

인라인 HTML 주석은 script요소를 이해하지 못하는 이전 브라우저가 스크립트 코드를 일반 텍스트로 표시하지 못하도록 하기 위한 것이다.

<script>
  <!--
  // JavaScript code here
  // -->
</script>

script요소를 이해하지 못하는 이전 브라우저는 위의 script 요소의 전체 내용을 ""로 끝나는 단일 HTML 주석으로 해석하여 스크립트를 완전히 무시한다. HTML 주석이 없으면 전체 스크립트가 이러한 브라우저에 의해 사용자에게 일반 텍스트로 표시된다.

script요소에 대해 알고있는 현재 브라우저는 "<!--"로 시작하는 경우 script요소의 첫 번째줄을 무시한다. 위의 경우 실제 자바 스크립트 코드의 첫 번째 줄은 "// JavaScript code here"행이다.

주석 마커의 사용은 script요소를 인식하지 못하는 브라우저가 사실상 존재하지 않기 때문에 요즘에는 거의 필요하지 않다. 이러한 초기 브라우저는 Mosaic, Netscape 1, Internet Explorer 2 등이 있다. 1955년 12월 Netscape 2.0, 1996년 8월 Internet Explorer 3.0부터 이들은 자바 스크립트를 해석할 수 있었다. 자바 스크립트를 지원하지 않는 최신 브라우저는 여전히 <script> 태그를 인식하고 사용자에게 표시하지 않는다.

인라인 XHTML 자바 스크립트

XHTML에서 메소드는 다소 다르다.

<script>
  // <![CDATA[
  // [Todo] JavaScript code here!
  // ]]>
</script>

<![CDATA[태그는 주석처리 됩니다. //는 브라우저가 실수로 <![CDATA[를 자바 스크립트 문으로 해석하는 것을 방지한다.

외부 스크립트에 연결

자바 스크립트는 일반적으로 사이트의 많은 웹 페이지에서 사용할 수 있도록 파일에 저장된다. 이 방법은 모범 사례로 간주된다. 이는 페이지의 동작(자바 스크립트)과 콘텐츠(HTML)를 분리하고 코드를 쉽게 업데이트할 수 있기 때문이다. 여러 페이지가 모두 동일한 자바 스크립트 파일에 링크되는 경우 한 곳에서만 코드를 변경하면 된다.

script 태그를 열기 위해서는 src="script.js"를 추가한다. 즉, 이 페이지의 자바 스크립트 코드는 웹 페이지와 동일한 디렉토리에 있는 "script.js"라는 파일에 있다. 자바 스크립트 파일이 다른 위치에 있는 경우 해당 경로로 src 속성을 변경해야 합니다. 예를 들어 자바 스크립트 파일의 이름이 "script.js"이고 "js"라는 디렉토리에 있는 경우 src는 "js/script.js"가 된다.

스크립트 요소의 위치

script 요소는 HTML 파일 내의 거의 모든위치에 나타날 수 있다.

표준 위치는 head내에 있다. 그러나 body내부에 배치도 허용된다.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>

Yahoo! 개발자 네트워크에서 제안한 웹사이트의 속도를 높이기위한 몇 가지 모범 사례가 있다. script 문을 </body> 앞에 배치하는 것이다. 이렇게 하면 다운로드 속도가 빨라지고 페이지가 로드되는 동안 DOM(문서 개체 모델)을 직접 조작할 수도 있다. 또한 보다 쉽게 관리할 수 있도록 HTML문서를 CSS 코드와 분리하는것이 좋다.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
</head>
<body>
<!-- HTML code here -->
<script src="script.js"></script>
</body>
</html>

외부 스크립트 평가 및 parser blocking 제어


    
+/-

기본적으로 자바 스크립트 실행은 "parser blocking"이다. 브라우저에서 문서에서 스크립트를 발견하면 DOM 구성을 일시 중지하고 자바스크립트 런타임에 제어를 넘겨주며 DOM 구성을 진행하기 전에 스크립트가 실행되도록 해야한다.
문서 본문의 맨 아래에 스크립트를 배치하는 대신 async 또는 defer 속성을 사용하여 외부 스크립트의 로드 및 실행을 제어할 수 있다. 동시에 일어나지 않는 외부 스크립트는 문서 구문 분석과 병렬로 로드되고 실행된다. 스크립트는 사용 가능한 즉시 실행된다.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script async src="script.js"></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>

지연된 외부 스크립트는 문서 구문 분석과 병렬로 로드되지만 문서가 완전히 구문 분석될 때까지 스크립트 실행이 지연된다.

<!DOCTYPE html>
<html>
<head>
  <title>Web page title</title>
  <script defer src="script.js"></script>
</head>
<body>
<!-- HTML code here -->
</body>
</html>