API
API(Application Programming Interface): 브라우저가 제공하는 함수들
console은 언어자체는 아니지만 많이 사용해서 출력을 볼 수 있음
async vs defer
<script src ="main.js"></script>
-
<script src ="main.js"></script> -
순서: parsing HTML > fetching js > executing js > parsing HTML
html 문서를 읽다가 main.js로 가서 js파일을 읽어온 뒤 다시 HTML 파일 읽음
-
단점
1) JS파일이 엄청 크고, 인터넷이 느리면 사용자가 읽는데 오래걸림body 태그 안 script 추가
<body> <div></div> <script src="main.js"></script> </body> -
순서: parsing HTML > fetching js > executing js
-
단점: 서버에서 js를 받아오는 시간이 오래 걸림
head + async
<head>
<script asyn src="main.js"></script>
</head>-
async는 boolean 타입의 속성이기 때문에 선언하는 것만으로도 true
-
순서
1) html: parsing HTML > blocked > parsing HTML
2) js: fetching js >executing js -
장점: fetching이 parsing 하는 시간에 병렬적으로 이뤄져 시간 절약
-
단점:
- HTML이 조작되기 전 js로 html을 읽어와야하는 경우 어려움 존재
- html blocked 때문에 시간이 걸릴 수 있음
head + defer
<head>
<script defer src="main.js"></script>
</head>
-
순서
1) html: parsing HTML > executing js
2) js: fetching js (page is ready)HTML을 먼저 보여주고 js를 실행함
parsing하는 동안 js를 모두 다운로드 해놓음
technology blog