*순수 바닐라자바스크립트 작성전에 ‘use strict’; 를 작성하자 ⭐⭐⭐⭐⭐
-자바스크립트는 유연한 언어이기때문에 개발자의 실수가 많을 수 있다.
-해당 선언은 비상식적인것을 쓸 수 없게 하는 엄격한 모드로 실행하는 방법이다.
'use strict';
console.log('Hello World!');꿀팁 ==>> type=modaule 선언하면 자동으로 엄격모드에 진입함
<script src="script.js" type="module"></script>* head 안에 script 넣기
-스크립트 다운로드 -> 실행 -> 파싱..
=> js 파일의 용량이 크고 웹이 느리다면 아주 많은 시간이 소요됨. ❌
* body 안 가장 맨 끝에 script 넣기
-자바스크립트에 의존적인 사이트라면 사용자가 정상적으로 페이지를 보기전까지 패칭하는 시간을 기다려야함 . ❌
async와 defer 속성은 스크립트가 로드되는 동안 다른 작업을 수행할 수 있도록 해주지만, 가장 큰 차이점은 스크립트 실행 시점임.
async는 스크립트 로드가 완료되는 대로 즉시 실행되지만, defer는 페이지의 파싱이 완료된 후에 실행됨.
* head 안에 script를 사용하되 async 선언방식
-장점 : body 끝에 붙어있는 것보다는 다운로드 받는시간 절약 가능
-자바스크립트 실행하기 전까지 기다림
-여러가지 스크립트가 있을때, 먼저 다운로드 끝난 애들부터 수행됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="./01.js"></script>
</head>
<body>
</body>
</html>* head 안에 script를 사용하되 defer 선언방식 ⭐⭐⭐⭐⭐
-명령만 시켜두고, 나머지 html,css를 퍼싱하게 됨.
-위를 전부 수행했을때 script 실행
-여러가지 스크립트가 있을때, 그 스크립트 전부 다운로드 받은 후 실행됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="app.js"></script>
</head>
<body>
</body>
</html>===> 위의 type="module"으로 지연 실행이 이미 내장되어 있기 때문에 defer 속성을 별도로 선언할 필요가 없다.
고로 defer 선언할 필요 없이 아래처럼 작성해도 가능!
<script src="assets/js/main.js" type="module"></script>
'JavaScript > code' 카테고리의 다른 글
| [javascript/code] 협업시 주의하기 / 세미 컨벤션 (0) | 2023.05.23 |
|---|---|
| [js/문제해결] 다크모드에서 페이지 변경, 새 페이지 열때마다 js가 깜빡거리는 문제 (바로 테마 적용 안되는 문제) (0) | 2023.01.10 |
| [js] 안쓰는 common.js 코드 콘솔에 오류 찍힐때 (0) | 2022.12.28 |
| [js/함수] 제이쿼리 closest 바닐라자바스크립트 함수로 바꾸기, 상위 특정 부모 찾기 (0) | 2022.12.27 |
| 함수 값 리턴하기 (0) | 2022.09.03 |