728x90
반응형
SMALL
1. 자바스크립트의 실행 순서
- 인터프리터 방식이므로 위에서 아래로 실행
1-1. Javascript 파일 및 문장 <head> ~ </head>사이에 넣었을 경우
html문서의 시작 ➡ <head>에 있는 <script>를 다운로드/실행 ➡ <body>에 있는 HTML 태그를 실행 ➡ 끝
- 외부 script 파일을 사용할 경우 script 파일 다운로드가 늦을 때 HTML이 실행되지 않은 상태에서 빈 화면이 보일 수 있음
1-2. JavaScript 파일 및 문장을 <body> 끝에 넣을 경우
html문서의 시작 ➡ <body>에 있는 HTML 태그를 실행 ➡ <script>를 다운로드/실행 ➡ 끝
- 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 보일 수 있음
1-3. <script async>를 사용할 경우
html문서의 시작 ➡ script 파일을 동시에 다운로드/실행 ➡ <body>에 있는 HTML 태그를 실행 ➡ 끝
- script 파일이 여러개 있을 경우 먼저 다운로드된 script 파일을 먼저 실행하게 됨
- script 파일이 서로 연관성이 있는 경우 하나의 스크립트만 실행 후 문제가 발생할 수 있음
(많이 사용하지 않음.)
1-4. <script defer>를 사용하는 경우
html문서의 시작 ➡ <body>에 있는 HTML 태그를 실행 ➡ <script>를 다운로드/실행 ➡ 끝
- HTML 시작되고 script 파일을 동시에 다운로드/실행을 진행함
- script 실행은 페이지 구성이 모두 끝날 때까지 지연
- script 순서에 따라 실행
✔ CSS, JavaScript가 반영되지 않을 경우(캐시가 남을 경우)
1. f12키 누르고 새로고침 버튼을 누르고 있는 상태에서 강력 새로고침 선택
2. ctrl + shift + r
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 자동 타입 변환 & 타입 변환 함수 & NaN(Not a Number) (0) | 2023.04.06 |
|---|---|
| [JavaScript] 자바스크립트의 데이터 타입 (0) | 2023.04.05 |
| [JavaScript] 자바스크립트의 변수(variable)와 상수(constant) (0) | 2023.04.05 |
| [JavaScript] 주석문 & VSC 익스텐션 설치 - snippets 등록하는 법 (0) | 2023.04.05 |
| [JavaScript] 자바스크립트란? & 자바스크립트의 역사, 특징, 출력 (0) | 2023.04.05 |
