이 코드를 보세요:
<body> <script src="deffer.js"></script> content </body>
defer.js의 내용은 다음과 같습니다.
alert(1)
이렇게 하면 알림 창이 닫힐 때까지 페이지가 공백으로 유지됩니다. 경고 창으로 인해 페이지가 계속 렌더링되지 않기 때문입니다.
이러한 문제를 방지하기 위해 defer 및 async 속성은 HTML 사양에 정의되어 있습니다. 이 두 속성의 구체적인 정의는 여기서 논의되지 않습니다. 어쨌든 이 속성은 이 페이지가 실행되어야 함을 브라우저에 알리는 데 사용됩니다. 페이지 렌더링이 완료된 후 스크립트가 실행될 때 페이지가 렌더링되도록 스크립트의 내용입니다.
<body> <script deffer async src="deffer.js"></script> content </body>
defer 또는 async가 추가된 여러 스크립트의 경우 실행 순서는 페이지에 나타나는 순서와 아무 관련이 없습니다. HTML 사양에서는 defer 스크립트가 순서대로 실행되어야 한다고 정의하지만 브라우저는 실제로 이 규칙을 따르지 않습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
