-
async vs deferStudy/JavaScript 2020. 5. 20. 19:10
//
노드 js와 api는 모두 console에 관련된 api를 가지고 있다.
그리고 이 둘의 api들의 interface가 둘다 동일하다.
1. console api
console API는 웹 API중의 하나이다.
API (Appication Programming Interface).
웹 APIs 는 자바스크립트 언어 자체에 포함된 아이가 아니라
브라우저가 제공하는 브라우저가 이해할 수 있는 함수들이다.
콘솔은 언어 자체에 포함되는 아이는 아니지만,
통상적으로 사용되는 아이여서
똑같은 콘솔apis를 이용해서 node JS 로도 출력할 수 있고
브라우저 상에서도 출력되는 걸 확인 할 수 있다.
2. Dev Tools
그리고 브라우저에서 딸려나오는 이런 개발 툴을 잘 사용하면 유용하게 활용할 수 있다.
inspection 기능.
console 에서 js를 실행할 수도 있음.
메모리, applicatio 등등..
3. 자바스크립트 공식사이트
mdn 사이트를 활용해라. 여기서 js를 배우는 것을 추천한다.
자세한정보, 최신정보.
4. async vs defer
html에서 js를 포함할 때 어떻게 포함하는게 좋을까?
1))<head></head> 태그 안에 넣어 사용하면,
윗줄부터 parsing하고 동기적으로 움직이기 때문에 시간이 오래걸림.
2)) <body> 태그 안에 맨 밑줄에 넣어 사용하기
브라우저가 html을 다운받고 쭉 해석한다음에 script에서 받아오고 실행.
그럼 사용자가 js를 파싱하느라 시간이 오래걸리기 전에 미리 html을
볼수가 있어서 좋긴하다. 그러나 단점도 있다.
단점은 사용자가 기본적인 html컨텐츠는 빨리보지만,
js에 의존적인 웹사이트라면 사용자가 제대로 이용하기 위해서는
기다려야하는 시간이 있기마련이다.
3)) head +async
<head> </head> 안에 맨 마지막에 아래와 같이 태그를 넣기.
<script asyn src="main.js"></script>
에이씽크는 불리언 타입의 설정값이기 때문에 선언만으로도 사용할 수 있음
이렇게 하면 컴퓨터가 html을 parsing하다가 이 스크립트 태그와 asyn를 보고
한쪽에 js파일 다운받아줘 라고 명령한뒤
js가 완료가 되면 그때 js를 실행하고 js 실행이 완료된 이후에
나머지 html을 parsing 한다.
이렇게 하면, 바디 끝에 사용하는 것보다 패칭이 병렬적으로 일어나서 다운로드 시간을 절약할 수 있다.
그러나 js가 html이 parsing 되기도 전에 실행이 되기 떄문에
js가 실행되고 조작하려할 때 html이 아직 나오지 않아서 문제가 생길 수 있음.
4)) head + defer
head 안에 script를 쓰고 defer를 선언한다.
그러면 script를 발견했을 때 다운받으라고 명령만 해놓고 html 파싱이 끝난 다음에 js를 실행한다.
이 친구가 가장 좋은 옵션이다.
만약 head+async를 다수의 js파일과 함께 사용한다면 아래와 같이
정의된 js파일 대로 실행되는게 아니라 먼저 팻치된 대로 실행이 되기 때문에 문제가 발생할 수 있다.
(순서에 의존적인 js라면 더욱..)
반대로 head+defer 같은 경우는 아래와 같이 먼저 다 다운받아놓고,
html parsing이 끝났을 때 정의된 순서대로 실행하기 때문에 우리가 원하는대로 스크립트를 사용할 수 있다.
출처 :
https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
'Study > JavaScript' 카테고리의 다른 글
primitive type and object (0) 2020.05.23 웹페이지의 스크롤 막기 (0) 2020.05.21 snake game (0) 2020.05.19 (게임) 구구단 구현 (0) 2020.05.18 객체 (0) 2020.05.18