JavaScript를 html에 연결하는 효율적인 방법
2021. 5. 12. 18:17ㆍTIL/자바스크립트
728x90
1. <head>에 넣기
-> script 파일이 클 경우 화면로딩시간이 길어질 수 있다
2. <body>에 넣기
-> 화면로딩 이후 script다운로드가 시작되기 때문에 script를 이용한 동적인 사이트일 경우 원하는 효과를 바로 보여줄 수 없다
3. head+asyn
-> html다운과 script다운이 병렬형식으로 진행되지만 script다운이 끝나면 바로 실행이 된다
자바스크립트 다운받는 시간은 줄일 수 있지만 html이 다운받아지기 전에 script가 실행되는 경우 원하는 이벤트 조작이 불가능할 수 있고, script가 실행되면 html 다운로드 진행은 멈춰질 수 있어 화면 로딩 시간이 길어질 수 있다
4. head + defer (가장 좋은 방법)
-> 병렬형식으로 다운로드 받고, script는 html을 모두 다운받아 화면로딩이 끝난 뒤에 실행된다
'use strict';
순수 바닐라자바스크립트를 이용할경우 상단에 써주는 것이 좋다
오류방지, 시간 단축
'TIL > 자바스크립트' 카테고리의 다른 글
| Object (0) | 2021.05.18 |
|---|---|
| class object 객체지향 (0) | 2021.05.17 |
| Function 함수 (0) | 2021.05.14 |
| 자바스크립트 연산자, if문 for문 switch문 (0) | 2021.05.13 |
| 변수 var, let, const (0) | 2021.05.12 |