DreamCoding _1_javascript_2

head안에 script가 있으면 한줄씩 분석 한 것을 css요소와 병합해서 DOM요소로 변환하게 된다.

=> 어떻게 자세히 DOM요소로 변환할까 생각하기.(일단은 browser가 한줄 한줄씩 읽는다고 생각하기)

 

단점 : javascript가 사이즈가 클 경우 사용자가 웹사이트를 보는 데 까지 많은 시간이 소요가 된다.

=> script를 head에 그대로 포함하게 하는 것은 좋지 않다.

body의 div안에 script를 넣어서 하면 browser가 html을 다운받아서 parsing해서 그 다음에 fetching을 하고 executing을 하게 된다.

 

단점 : 사용자가 기본적인 html의 컨텐츠를 빨리 본다는 장점은 있지만 만약에 웹사이트가 javascript에 매우 의존적인 것이라면 사용자가 의미있는 컨텐츠를 보기위해서는 fetching하는 시간과 executing시간을 기다려야해서 시간적인 단점이 있다.

head안에 script를 이용하지만, asyn이라는 속성값을 써줌으로써, (asyn은 boolean type의 속성값이기 때문에 선언하는 것만으로도 True로 설정이 된다.) browser가 html을 다운로드후에 , parsing하다가 asyn가 있는것을 확인하고 병렬로 main.js를 다운로드 받고 다시 parsing하다가 main.js가 다운로드가 완료되면 그때 parsing하는 것을 멈추고 다운로드 된 js파일을 실행하게 된다. 실행을 다하고 나서 나머지 html파일을 parsing하게 된다. 

 

단점 : body끝에 사용하는 거보다 fetching이 parsing하는동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다. 하지만 js가 html이 parsing되기 전에 실행 될 수 있기 때문에 만약 js파일에서 querySelector를 이용해서 DOM요소를 조작한다고 그러면 조작하려고 하는 시점에 HTML이 우리가 원하는 요소가 정의되어 있지 않을 수도 있기 때문에 이 부분이 단점이다.

 

두번째로 HTML을 parsing하는 동안 언제든지 js를 실행하기 위해서는 parsing과정을 block할 수 있기 때문에 사용자가 page를 보는데 시간이 조금 걸릴 수 있다는 단점이 있다.

 

 

defer요소를 사용

=> parsing을 하다가 defer가 있는 것을 확인하고 main.js를 다운받자라고 명령만 시켜놓고 나머지 html을 끝까지 parsing하게 된다. parsing이 끝난 다음에 js를 실행하게 된다.

 

defer이 가장 좋은 옵션이다 => html을 parsing하는 동안 필요한 js를 다 다운받아놓고, html parsing을 먼저해서 사용자에게 page를 먼저 보여준 다음에 바로 이어서 js를 실행하기 때문이다.

 

 

 

async와 defer의 차이점을 세부적으로 살펴보면, async는 먼저 다운된 js를 실행하게 된다.

즉 정의된 js 순서에 상관없이 먼저 다운된 js를 실행하므로 만약 js가 순서에 의존적이라면 문제가 될 수 있다.

 

반면에 defer은 parsing하는동안 필요한 js를 모두 다운받은 다음에 순서대로 실행하기 때문에 정의한 순서가 지켜지므로 사용자가 원하는대로 실행이 될 수가 있다.

 

결론 head안에 defer요소를 쓰는 것이 제일 안전하고 효율적이다.

 

참고 : https://krksap.tistory.com/939

        https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2 

크롤링(Crawling)이란? 또는 파싱(Parsing)이란? 스크래핑이란?