흔히 자바스크립트를 삽입할때 스크립트 요소를 사용합니다. 이에 대해 알아보며 곁들여 noscript 사용법도 알아봅니다.
SCRIPT 요소
script 요소는 클라이언트 사이드 스크립트와 같은 프로그래밍 코드를 HTML 문서 내에 직접 작성하거나 불러올때 사용한다. script 요소는 문서 내 어디든 놓일 수 있으며, 그 횟수도 제한이 없다.
문서의 머리에 script 요소를 두면 로딩과 함께 스크립트가 실행된다. 문서 전체에 걸쳐 기능을 제어해야 하거나 문서 본문을 처리하기 전에 스크립트가 실행될 필요가 있을때 문서의 머리에 둔다.
문서의 </body> 직전에 script 요소를 두게 되면 문서의 마지막에 스크립트가 실행된다. 이는 접속자들의 화면에 HTML의 구조와 CSS의 디자인을 먼저 적용하고 렌더링되기 때문에 문서 로딩의 체감시간을 줄일 수 있다.
<head>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<script>
document.write("Hello!")
</script>
</body>
type 속성
type 속성은 스크립트의 MIME 타입을 지정하는 속성이다. 프로그램 언어에 따라 브라우저에게 어떤 프로그래밍 언어인지 언질해 줘야 하는데, 이때 type 속성을 사용한다.
type 속성값은 미디어 타입을 지정하는 타입(type)과 프로그램 언어를 지정하는 서브타입(subtype)으로 구성되며, 이 둘은 슬래시(/)에 의해 구분된다. HTML5에서는 text/javascript가 기본값이므로 스크립트 타입이 이와 같다면 type 속성을 지정하지 않아도 된다. 아래에서 사용가능한 속성값을 나열한다.
- type="text/javascript"
- type="text/ecmascript"
- type="text/vbscript"
- type="application/javascript"
- type="application/ecmascript"
defer 속성
defer 속성은 스크립트 실행의 연기(defer)를 지정한다. 브라우저가 src 속성을 만나게 되면 외부 스크립트 파일에 집중하기 위해 HTML 문서의 파싱을 잠시 미룬다. 외부 스크립트 파일에 집중하는 시간이 길어질수록 문서 로딩은 늦어질 수 밖에 없다.
그래서 스크립트 실행보다 문서 로딩 속도가 더 중요한 경우 저작자는 스크립트를 HTML 문서 하단에 작성하여 스크립트보다 문서의 구성 요소를 먼저 파싱하도록 마크업 하기도 하는데 이런 효과를 외부 스크립트 파일에도 적용하기 위해 defer 속성이 만들어졌다. 이 속성을 이용하면 브라우저가 HTML 문서를 전부 파싱한 다음에 스크립트를 실행할 수 있게 만들 수 있다.
<script src="demo_defer.js" defer="defer"></script>
defer 속성은 외부 스크립트 파일에 한정되므로 반드시 src 속성이 함께 지정되어야 한다.
async 속성
async 속성은 스크립트의 비동기 실행을 지정한다. 이 속성은 defer 속성과 비슷하다. 다만 defer 속성이 HTML 문서의 파싱이 완료된 이후에 스크립트를 실행하는데 반해, async 속성은 HTML 문서의 파싱 완료와 상관없이 스크립트 파일을 수신한 이후에 실행한다는 점이 다르다.
브라우저가 HTML 문서를 파싱하다가 script 요소를 만나면 스크립트 파일을 수신하고 수신이 완료되면 그다음에 스크립트를 실행한다. 스크립트를 실행하는 동안에는 HTML 문서에 있는 다른 요소를 파싱하지 못하므로 전체적으로 HTML 문서의 파싱이 늦어지는 문제가 생긴다. 이점을 보완하고자 async 속성이 제안되었다.
브라우저가 async 속성을 만나면 스크립트 실행을 뒤로 미루고 우선 스크립트 파일의 수신과 HTML 문서의 파싱에 집중한다. 그런 다음 외부 스크립트 파일의 수신이 완료되었을 때 스크립트를 실행시킨다.
<script src="demo_async.js" async="async"></script>
defer 속성과 마찬가지로 src 속성이 지정되어야만 async 속성이 유효하다.
NOSCRIPT 요소
noscript 요소는 스크립트 미지원을 표시한다. 이 요소는 스크립트를 지원하는 때에는 표시되지 않고 스크립트를 지원하지 않는 경우에만 표시된다.
스크립트 비활성화시 리다이렉트 시키기
브라우저에서 스크립트가 비활성화 되어 있을시에 meta 요소를 사용하여 활성화 방안을 제공하는 사이트나 적절한 곳으로 리다이렉트 시킨다.
<head>
<noscript>
<meta http-equiv="Refresh" content="0; URL=http://www.enable-javascript.com/ko/">
</noscript>
</head>
스크립트 비활성화시 메세지 띄우기
브라우저에서 스크립트가 비활성화 되어 있을시에 적절한 문구를 이용해 대체방안을 마련한다.
<body>
<noscript>
이 사이트의 기능을 모두 활용하기 위해서는 자바스크립트를 활성화 시킬 필요가 있습니다.
<a href="http://www.enable-javascript.com/ko/" target="_blank">
브라우저에서 자바스크립트를 활성화하는 방법</a>을 참고 하세요.
</noscript>
</body>
2010년 발행된 야후!의 네트워크를 조사한 한 연구에서는 자바스크립트를 비활성화 해 놓은 사용자가 전 세계 전체 트래픽의 약 1%에 해당한다는 결과를 내놓았다. 또 다른 연구에서도 10억 명에 달하는 방문자를 조사한 결과 유사한 수치가 나타났다. 이 두 연구에서는 다른 나라와 비교했을때 미국의 방문자가 가장 많이 자바스크립트를 비활성화해둔 것으로 나타났다. 이렇듯 자바스크립트를 비활성화 해놓은 사용자들의 수를 우려하지 않아도 될 만큼 적은 수라는 것을 알수 있다.
