자바스크립트 삽입방식과 위치

1. 자바스크립트 삽입방식

자바스크립트를 실행하는 방법은 문서 안에 <script> 태그를 이용해 작성하거나 외부의 스크립트 파일을 링크하는 것이다.

<!-- 1. 문서 안에 작성. -->
<script type="text/javascript">
// 코드내용
</script>

<!-- 2. 외부 스크립트 파일 링크. -->
<script type="text/javascript" src="링크주소"></script>

type="text/javascript" 부분은 HTML5에서는 생략 가능.
문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다.

1번 사용할 경우 :: 간단한 스크립트의 경우이거나 해당 문서에만 적용되는 코드들, 초기화 등에 자주 사용.

2번 사용할 경우 :: 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 사용.

이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식.

2. 자바스크립트 삽입 위치

브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될 때까지 브라우저 렌더링을 멈추게 된다.

즉, 자바스크립트 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미친다.

2-1. `<head>`에 삽입되는 경우

<head>
  <script>
  // 코드내용
  </script>
</head>

브라우저 렌더링에 방해가 되어 무거운 스크립트가 실행되는 경우 오랫동안 완성되지 못한 화면을 노출하게 된다.
문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용된다.
문서의 DOM(Document Object Model) 구조가 필요한 스크립트 경우 document.onload와 같은 로드 이벤트가 추가되어야 에러없이 작동된다.

2020/09/24 - [👩🏻‍💻DEVELOPE/JavaScript] - [JavaScript] 문서의 로드시점 - onload / DOMContentLoaded

2-2. `</body>` 앞에 삽입되는 경우

...
  <script>
    // 코드내용	
  </script>
</body>

브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되므로 콘텐츠를 변경하는 스크립트의 경우 화면에 노출된 채로 변화된다.
대부분의 스크립트의 위치로 추천.
문서의 DOM 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요없다.

Reference

https://webdir.tistory.com/514

저작자표시 비영리 동일조건

'👩🏻‍💻STUDY > JavaScript' 카테고리의 다른 글

[JavaScript / ES6] let, const와 블록 레벨 스코프 (0)	2021.02.11
[JavaScript] Call By Value (0)	2021.01.29
[JavaScript] 문서의 로드시점 - onload / DOMContentLoaded (0)	2020.09.24
[JavaScript] return / break (0)	2020.08.13
[JavaScript] 스케줄링 setTimeout 과 setInterval (0)	2020.04.10

/* jmjmjm */

[JavaScript] JavaScript 삽입방식과 위치

자바스크립트 삽입방식과 위치

1. 자바스크립트 삽입방식

2. 자바스크립트 삽입 위치

2-1. `<head>`에 삽입되는 경우

2-2. `</body>` 앞에 삽입되는 경우

Reference

'👩🏻‍💻STUDY > JavaScript' 카테고리의 다른 글

티스토리툴바

[JavaScript] JavaScript 삽입방식과 위치

자바스크립트 삽입방식과 위치

1. 자바스크립트 삽입방식

2. 자바스크립트 삽입 위치

2-1. <head>에 삽입되는 경우

2-2. </body> 앞에 삽입되는 경우

Reference

'👩🏻‍💻STUDY > JavaScript' 카테고리의 다른 글

'👩🏻‍💻STUDY/JavaScript' Related Articles

티스토리툴바

2-1. `<head>`에 삽입되는 경우

2-2. `</body>` 앞에 삽입되는 경우