`<script>` 태그에 `async`와 `defer` 속성을 사용하는 것이 웹 페이지 성능에 어떤 영향을 미치는지 설명하고, 각각 어떤 상황에서 사용해야 하는지 구체적인 예시와 함께 비교 설명해 주세요.

async와 defer는 <script> 태그에 사용되어 웹 페이지 로딩 성능을 향상시키는 속성입니다. 둘 다 HTML 파싱을 멈추지 않고 스크립트를 다운로드하지만, 실행 시점에 차이가 있습니다.

async 속성은 스크립트가 다운로드되는 즉시 HTML 파싱을 중단하고 실행합니다. 따라서 스크립트 실행 순서가 보장되지 않으며, DOMContentLoaded 이벤트 발생 시점을 늦출 수 있습니다. 주로 페이지 렌더링에 필수적이지 않은 독립적인 스크립트, 예를 들어 광고 스크립트나 분석 스크립트에 사용합니다.

defer 속성은 HTML 파싱이 완료된 후 DOMContentLoaded 이벤트 직전에 스크립트를 실행합니다. 스크립트 순서가 HTML에 나타난 순서대로 보장되며, DOMContentLoaded 이벤트 발생을 지연시키지 않습니다. DOM 조작이나 다른 스크립트에 의존적인 스크립트, 예를 들어 jQuery와 같은 라이브러리에 적합합니다.

간단히 말해, async는 "되는대로 빨리", defer는 "HTML 파싱 끝나면 순서대로" 실행한다고 생각하면 됩니다.