HTML / 스크립트 태그 작성 방법

HTML에 스크립트 태그를 작성하는 방법은 크게 4가지가 있다.

• 헤드태그안에 스크립트 태그 작성
• 헤드태그 안에 스크립트 작성 시 defer 추가
• 헤드태그 안에 스크립트 작성 시 async 추가
• 바디태그안의 가장 아래에 스크립트 작성

 

헤드태그안에 스크립트 태그 작성

위와 같이 스크립트 태그를 헤드태그안에 작성할 경우 브라우저가 순차적으로 HTML파일을 파싱하다 스크립트 태그를 만나면 파싱을 멈추고 스크립트파일을 서버로부터 다운받고 실행한 후 파싱을 이어간다. 이로인해 야기되는 문제점은 바디태그를 파싱하여 만들어진 DOM요소로 스크립트를 실행하는 .js파일이 존재하지 않는 바디의 DOM요소에 접근하려 하기 때문에 스크립트태그는 오류가 발생한다.

 

 

헤드태그 안에 스크립트 작성 시 defer 추가

헤드태그 내부에 스크립트를 작성하는 또다른방법은 defer추가하여 작성하는 것이다. defer를 스크립트 태그에 추가하면 브라우저는 파싱을 순차적으로하다가 스크립트 태그를 만나면 비동기적으로 .js파일을 서버로부터 다운받으면서 파싱을 마무리하며, 그렇게 파싱을 마치면 다운받아두었던 .js파일을 실행한다. 가장 이상적인 스크립트 태그 작성방법이 되겠다.

 

 

헤드태그 안에 스크립트 작성 시 async 추가

스크립트를 작성하는 또다른 방법은 헤드내부에 스크립트를 작성 시 async를 걸어주는 것이다. async를 걸면 브라우저는 HTML파일을 파싱하다가 스크립트 태그를 만나면 비동기적으로 서버로부터 .js파일을 다운받으며 다운이 완료되면 파싱을 멈추고 .js를 실행한다. 만약 위 자료처럼 스크립트파일을 여러개 읽는다면 서버로부터 다운받는 시점은 비슷하게 비동기적으로 이루어지며 작성 순서와 상관없이 다운로드가 완료된 .js파일을 먼저 실행하는데, 각각의 .js파일이 실행될때는 파싱을 멈추고 실행된다. 이로인해 야기되는 문제점은 헤드태그에 노멀한 스크립트태그를 작성하였을때 야기되는 문제점은 동일하게 발생되며, 추가적으로 스크립트 파일이 여러개일때 스크립트 태그 순서가 웹페이지에 영향을 미치는 구조라면 async를 사용하는 것은 매우 위험한 일이 될 수 있다.

 

 

바디태그안의 가장 아래에 스크립트 작성

스크립트 태그를 작성하는 마지막 방법은 바디태그안의 가장 하단에 작성하는 것이다. 이렇게 작성시 브라우저는 HTML파일을 모두 파싱 후 .js파일을 서버로부터 다운받고 실행한다. 이로인해 야기되는 문제점은 HTML파일의 파싱을 마친 시점에서 사용자는 웹페이지를 바로 볼 수 있는데, 사용자가 웹페이지가 보여진 후 스크립트와 관련된 기능을 바로 이용시 .js파일의 다운로드 및 실행 작업이 완료되지않았다면 웹페이지는 제대로 동작할 수 없게된다. .js파일이 주요하지 않은 경우의 웹페이지라면 크게 문제될게 없겠지만 주요한 웹페이지의 경우 심각한 문제가 발생할 수 있다.