답변 3/26
async와 defer는 html문서에서 자바스크립트 코드를 로딩하고 실행할 때 속성으로 사용하는데요.
async는 비동기적으로 실행되어서 실행이 끝나기 전에 다른 코드가 실행됩니다.
defer는 순차적으로 실행되어서 작성된 순서대로 실행됩니다.
두가지 다 html 렌더링을 블락합니다(맞나?)
사실 잘 모르겠어요.
AI 피드백
답변에 대한 피드백입니다:
1. 기본 개념에 대한 이해가 부족합니다.
- async와 defer는 스크립트 로딩 방식을 제어하는 속성입니다
- HTML 파싱을 차단하지 않고 병렬로 스크립트를 로드한다는 공통점이 있습니다
2. 각 속성의 특징을 정확히 구분해보면:
일반 스크립트:
- HTML 파싱이 중단되고 스크립트를 즉시 로드/실행
- 스크립트 실행이 완료될 때까지 HTML 파싱 차단
async:
- HTML 파싱과 병렬로 스크립트 로드
- 스크립트 로드가 완료되면 HTML 파싱을 중단하고 즉시 실행
- 실행 순서가 보장되지 않음 (로드가 완료되는 순서대로 실행)
defer:
- HTML 파싱과 병렬로 스크립트 로드
- HTML 파싱이 완료된 후 순서대로 실행
- 실행 순서가 보장됨
3. 사용 사례:
- async: 다른 스크립트에 의존성이 없는 독립적인 스크립트 (예: 광고, 분석 도구)
- defer: 실행 순서와 DOM 의존성이 중요한 스크립트
4. 추가로 알면 좋은 내용:
- 모듈 스크립트(type="module")는 기본적으로 defer처럼 동작
- 동적으로 추가되는 스크립트는 기본적으로 async처럼 동작
- 성능 최적화를 위해 적절한 속성 선택이 중요