[JS] JS의 삽입 방식과 삽입 위치

in Web Basic on Javascript
[JS] JS의 삽입 방식과 삽입 위치

JavaScript의 위치에 대해서 알아보자

1.개요

1-1. 자바스크립트의 삽입 방식은 다음과 같은것이 있다.

  • <script> 태그를 안에 직접적으로 코드내용을 입력하는방식
  • js 확장자로 파일을 따로 분리해서 <script src=”링크주소”> 로 입력하는방식

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

후자의 경우는 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 링크해 사용되곤 한다. 이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식이다. 

<script>
// 간단한 스크립트 
</script>

<script src="파일링크주소">

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

자바스크립트의 삽입위치는 문서 어느 곳에든 배치가 가능하다 하지만 <head>태그 <body> 태그 안에 삽입하는것이 보편적이다.

<head>
  <script>
    document.write('head에 들어간 manbalboy')
  </script>
</head>

<body>
  <script>
    document.write('body에 들어간 manbalboy')
  </script>
</body>

그렇다면 삽입위치는 어디가 제일 좋을까.

정답은 바로 body 최 하단부 이다 그 이유는 브라우저가 랜더링하는 매커니즘에 있다. 브라우저는 js 파일을 만나면 js 파일을 해석할 때 랜더링을 멈추기 때문에 큰 js 파일이 마크업보다 먼저있다면 해석할때까지 바디의 마크업들이 랜더링이 되지않아 사용자 입장에서는 멈춰있는 느낌을 받을수 있기 때문에 화면 요소들이 랜더링 된후 js 파일을 읽게 하는 것이 제일 성능상 좋다

하지만 언제나 예외는 있는법 JS 로 마크업들이 보여지기전에 처리해야할 것들은 head 에 삽입 하여야한다. 역시 개발은 절대적이란 없는법 SI 절대적인것이 있고 개성은 죽여가면서 찍어내기…

2. 정리

이번장은 짧고 누구나 아는 부분을 포스팅 하였는데 그이유는 브라우저의 랜더링 원리에 대해서 조금 생각하고 js 를 삽입하는 개발자가 되고 싶은 마음에 포스팅을 하였다.

© 2021. All rights reserved.