웹 페이지의 성능을 높이고 싶다면 JavaScript는 가급적 외부 파일로 분리하는 것이 좋습니다. 코드가 별도의 파일로 존재하면 웹 브라우저가 이를 캐시(cache)할 수 있어, 같은 페이지를 다시 방문하는 사용자에게 훨씬 빠른 로딩 속도를 제공합니다.
외부 JavaScript 파일을 사용해야 하는 경우
여러 페이지에서 동일한 스크립트를 재사용하거나, 성능 최적화가 중요한 대부분의 상황에서는 외부 JavaScript 파일을 사용하는 것이 바람직합니다. 외부 파일로 분리하면 HTML 문서가 깔끔해지고 유지보수도 쉬워집니다.
외부 JavaScript 파일을 만들려면 확장자가 .js인 파일을 생성한 뒤, HTML 문서의 <script> 태그에 src 속성을 사용하여 해당 파일을 연결하면 됩니다.
만약 외부 JavaScript 파일이 여러 개라면, 하나의 웹 페이지에 모두 추가하는 것이 페이지 성능 향상에 도움이 됩니다. 브라우저가 각 파일을 한 번씩만 다운로드하고 캐시하기 때문입니다.
예제: 외부 JavaScript 파일 작성
다음과 같은 new.js 파일이 외부 JavaScript 파일이라고 가정해 보겠습니다.
function display() {
alert("Hello World!");
}
이제 이 외부 JavaScript 파일을 HTML 웹 페이지에 추가합니다.
HTML 예제 코드
<html>
<body>
<form>
<input type = "button" value = "Result" onclick = "display()"/>
</form>
<script src = "new.js">
</script>
</body>
</html>
위 예제에서 <script src = "new.js"> 부분이 외부 파일을 불러오는 역할을 합니다. 버튼을 클릭하면 new.js에 정의된 display() 함수가 실행되어 알림 창이 표시됩니다.
인라인 스크립트를 사용해야 하는 경우
인라인 스크립트는 단일 페이지 웹사이트처럼 규모가 작고, 별도의 파일 관리가 필요하지 않은 경우에만 제한적으로 사용하는 것이 좋습니다. 인라인 코드는 HTML 문서 안에 직접 작성되기 때문에 브라우저가 캐시할 수 없어, 매번 페이지 로딩 시 함께 처리되어야 하기 때문입니다.
정리
- 성능 향상이 목표라면 → 외부 JavaScript 파일 사용
- 단일 페이지 웹사이트나 아주 간단한 기능 → 인라인 스크립트 허용
- 코드 재사용과 유지보수가 필요하다면 → 반드시 외부 파일로 분리