모든 자바스크립트 파일이 한번에 로딩된다?
이번엔 이런 질문을 가져왔다.
모든 자바스크립트 파일을 브라우저에서 한번에 로딩했을때 발생하는 문제점이라..
그렇다면 필시 어떤 문제가 생긴다는 말이렷다?
어떤 문제가 생길지.. 한번 생각을 해보도록 하자.
일단 웹을 구성하는 기본적인 틀을 생각해본다면
html코드를 세팅하고 그 다음에 css 와 js 파일을 각각 head 와 body 태그에 붙여넣어 연결을 시킨다.
그리고 js 파일과 css 파일 안에서 작업을 해주었고.. 크게 문제를 느끼지 못했던것 같다..?
당연히 그럴것이다, 우리가 학원이나 개인적으로 했던 프로젝트들은 어찌보면 귀여운(?) 수준이었기에
컴퓨터가 절대로 부담가지지 않을만한 크기여서 이렇게 제시된 문제점을 확인할 일이 거의 없었을 것이다.
하지만, 이제 앞으로 현업에서 하게 될 작업들은 이보다도 큰 크기를 가질것이기에
이 문제점에 대해서 원인과 해결방안을 기본적으로는 이해하고 있어야 할것이다.
이번에 다루는 문제는 자바스크립트 파일을 연결해주는 html 태그 속 script 태그에 초점을 맞춰야 한다.
html 속 script 태그의 위치는 딱히 정해져있지는 않다, head 태그안에 있을때도 있고, body 태그 안에
있을때도 있다, 하지만 우리는 그중 body 태그의 가장 하단에 위치하게끔 배웠을것이다.
바로 이것이 위의 문제점을 일차적으로 해결하기 위한 방법이라고 생각하면 되겠다.
기본적으로 html 은 코드를 위에서부터 아래로 훑어가며 파싱하게 되는데,
그 과정에서 script 파일을 마주치게 된다면 html은 파싱을 멈추고 script 태그 안 자바스크립트 파일을
로드하게 된다, 그리고 그 로드가 전부 끝날때 까지 script 태그 아래쪽에 있는 dom 태그들을 파싱하지
못하는것이다.
이렇게만 설명해도 왜 script 태그를 가장 하단에 위치하라고 하는지에 대해선 이해가 될것이다.
그렇다면 우리는 기술면접때 저런질문을 받는다면 어떻게 대답해야 될까? 나는 이렇게 해보려고 한다.
"script 태그 속 자바스크립트 파일이 로드되는 순간 모든 데이터를 받아오기 전까지는
html 안의 다른 요소들을 읽을 수 없기때문에 크기가 큰 파일의 경우에는 그만큼 기다리는 시간이 길어질 것
같습니다."
그렇다면 이런 질문을 던질것이다.
"그럼 script 태그를 body 하단에 넣어서 모든 요소를 읽은다음 자바스크립트를 로드하면 되는거 아닌가요?"
그럴듯한 질문이다, 내가 대답한대로라면 body 태그 가장 아래에 script 태그를 두면 해결되는 일이기때문.
하지만 여기서는 하나 생각해야할것이 있다, html 과 js 의 역할에 대한것이다.
html은 화면을 구성하는 역할을 한다, 우리가 눈으로 볼 수 있는 페이지 말이다.
그래서 script 태그를 최하단에 둠으로써 html페이지를 읽어와 화면을 구성하는것은 정상적일것이다.
하지만 js 파일을 읽어야 하는데, 만약 이 크기가 커서 로드하는데 시간이 걸린다면?
js 파일은 이 페이지가 동적으로 동작하게끔해주는 기능을 가지고 있는데 이 파일의 로드가 길어진다면
페이지는 정상적으로 출력이 되는데, 데이터나 기타 다른 움직임을 하는데 제한이 걸릴것이다.
속빈강정이 된다는 것이다. js 파일이 전부 로드되고 나서야 그 페이지는 제대로 사용할 수 있게 될것이다.
이것이 script 태그를 body 최하단에 넣는 방법을 일차원적인 해결방법이라고 하는 이유이다.
아까도 말했다시피 지금처럼 귀여운 프로젝트를 하는데는 전혀문제가 되지 않는다.
그렇다면 우리는 또 어떤 방법을 찾아볼 수 있을까.
이리저리 찾아봤더니 두가지의 방법을 제시한다. 그것은 async 와 defer 이다.
async 와 defer 는 자바스크립트 로드 시 동시에 비동기로 dom을 파싱하는것도 가능하게 해준다.
이것은 둘다 해당되는 공통점이다, 하지만 둘 사이에도 차이는 존재한다. 그러므로 상황에 따라
async 와 defer 를 잘 구별하여 사용하면 될듯 하다.
async
async 는 html 파싱이 완료되지 않았더라도, 먼저 로딩되는 자바스크립트 파일부터 실행한다.
defer 같은 경우에는 html 파싱과 script 로드를 동시에 하지만, 실행은 html 파싱이 끝난 후에 하는데,
async 는 파싱과 로드를 동시에 하는것까지는 같지만, 그 후에 로딩이 끝난 자바스크립트 파일은 곧바로
실행하게 된다, 그렇게 된다면 또다시 script 를 실행하는 과정에서 html 파싱이 멈추게 된다.
이 방법은 특정한 상황에만 쓰인다고 한다, 어떤 상황일지는.. 생각해 봐야할것 같다.
defer
defer는 html 파싱이 완료된 후 자바스크립트 코드를 실행한다.
초반 html 파싱이 이루어지다가 script 태그를 만나게 되면 일반적인 경우라면 파싱이 여기서 멈추고
script 파일을 로드하겠지만, defer 속성이 들어가게 되면, 파싱을 멈추지 않고 script 파일을 로드한다.
이것이 비동기 방식이다. 그다음에 html 파싱이 끝난 후에 script 파일이 실행된다.
예를들어, script 파일에 버튼이 있었다고 하면, html 파싱이 끝난 후 로드하고 실행하는것이 아니라,
이미 로드가 되어있기 때문에 파싱이 끝났다면 바로 버튼을 실행할 수 있게 되는것이다, 별거 아닌듯 하지만
이것은 꽤 많은 차이를 보여준다.
html 파싱과 script 로드 및 실행의 관계에 있어 좀더 원활한 진행을 할 수 있게 도와주는
async 와 defer 를 알아봤는데, 이 둘중에서는 defer 가 좀더 보편적으로 쓰인다고 한다.
위의 설명을 읽어보았다면 왜인지는 어느정도 이해가 될듯 하다.
아무튼 모든 자바스크립트 파일을 브라우저에서 한번에 실행시킬때 생기는 문제점과 해결방안을 알아봤다.
