보통 html을 작성할 떄
<script src = .. 문을 사용하여 javascript 코드를 이용하게 된다
일반적으로 html이 모두 파싱되어서 DOM 요소가 생성된 후에 js를 읽는 방식인
<body> 끝부분에 script를 선언하게 되는데
이역시 파싱이 끝나고 나서 js 파일을 서버로부터 받아서 요소들에 적용시키기 때문에
사용자 입장에서는 기다려야 한다는 단점이 발생하게 된다. 즉 느리다
script async src = ...
script defer src = ...
이 두가지를 설명할테니 장단점을 알아본 후 위의 단점을 해결하는 방안을 찾아보자
Async?___________________________________________________________
async을 사용하게 되면
html 코드를 파싱하다가 script를 만나는 순간 js 파일을 fetching(서버로부터 가져옴) 하는 작업이
병렬적으로 실행된다.
=> 병렬적으로 발생하는 fetching 작업이 종료되면
컴파일러는 파싱을 중단하고 fetching한 js 코드를 executing(실행, 적용) 하는 과정을 거치게 된다.
분명 async을 사용하지 않는 것 보다 사용하는 것이 사용자측면에서 좀더 빠른 서비스를 경험하게 된다.
단점은?
애초에 async을 body 내에서 사용하는 것은 별반 차이가 없다
즉 head 내에서 사용하게 되는데
이 경우 executing 하는 과정에서 만약 컴파일러가 아직 js 에 선언된 변수(querySelector 등)를
읽지 못했다면 body 내에서 선언했더라도 사용할 수 없게 되어 에러가 발생하게 된다.
defer?______________________________________________________
defer은 async보다 좀더 좋은 동작을 수행한다.
async이 병렬적으로 끝난 fetching 마다 executing을 실행했다면,
defer은 fetching이 끝났어도 executing을 실행하지 않는다.
==> page parsing이 끝난 직후에 fetching이 끝난 모든 js를 executing 하게 된다.
사용자측면에서는 defer을 사용할 떄 더욱 빠른 서비스를 경험할 수 있게 된다.
'web' 카테고리의 다른 글
| FirebaseError: Missing or insufficient permissions. (0) | 2020.09.14 |
|---|---|
| 리액트 문법 필기 (0) | 2020.09.11 |
| SPA - Single Page Application (0) | 2020.09.09 |
| CSS (0) | 2020.09.08 |
| 강의내용 (0) | 2020.09.05 |