반응형
HTML에 포함시키는 방법
- Inline JavaScript
- Internal JavaScript
- External JavaScript
1. Inline 방식 (지양)
<script src="hello.js"></script>
- HTML태그 내에 간단한 소스를 작성해서 실행되게 하는 방식
- 고전적인 방식으로 가독성이 떨어지고, 유지보수에 비효율적
2. Internal 방식
<!DOCTYPE html>
<html>
<head>
<script>
document.write("Hello, Word~!");
</script>
</head>
<body>
<h1>스크립트 포함 방법</h1>
<script>
document.write("Hello, Word~!");
</script>
</body>
</html>
- script 태그 영역에 스크립트를 작성하여 실행하는 방식
- <head> 태그 내에 포함시키거나 <body> 태그의 끝에 포함
<head>에 포함시킬 경우, 스크립트 파일이 크거나 사용자의 인터넷 환경이 느릴 경우 로딩 시간이 길어짐
<body>의 끝에 포함시킬 경우, HTML은 빨리 볼 수 있지만 웹사이트가 자바스크립트에 의존적인 경우에는 로딩시간이 길어짐
3. External 방식
<script src="hello.js"></script>
- 별도의 js 파일로 작성하여 가져와서 실행되는 방식
- 내부에 포함시키는 방식보다 가독성과 유지보수에 유리함
1) async 속성
<script async src="test.js"></script>
- 웹페이지가 자바스크립트를 가져오는 시간을 절약할 수 있다.
- 원하는 요소가 아직 정의되지 않았을 때 주의해야 하며 여전히 로딩 시간이 지연될 수 있다.
<다수의 파일이 포함되어있을 경우>
<script async src="test1.js"></script>
<script async src="test2.js"></script>
<script async src="test3.js"></script>
- 다수의 스크립트 파일이 있을 경우 스크립트 파일을 다운로드하게 되면 먼저 다운로드한 파일부터 실행하게 된다.
- 정의된 스크립트의 순서에 상관없이 다운로드 순으로 실행된다.
- 순차적으로 실행되어야 하는 경우는 주의해야 한다.
2) defer 속성
<script defer src="test.js"></script>
- html을 파싱 하는 동안 필요한 스크립트 파일을 다운로드한 후 파싱이 끝나면 바로 실행됨
<다수의 파일이 포함되어있을 경우>
<script defer src="test1.js"></script>
<script defer src="test2.js"></script>
<script defer src="test3.js"></script>
- 필요한 자바스크립트 파일을 다운로드하고 파싱이 끝나면 정의한 순서대로 실행됨
위에 방법 중 <head> 태그 내에 외부 스크립트를 포함시키고 defer 속성을 사용하는 것이 가장 좋아 보인다. 하지만 지원되지 않는 브라우저도 있으니 주의해야 할 듯하다.
반응형
댓글