HTML에 Javascript 파일을 추가하는 가장 좋은 방법
- Barbara Streisand원래의
- 2024-10-09 20:33:28747검색
HTML에는 JavaScript 파일을 포함하는 방법이 여러 가지 있습니다. 네 가지 방법과 그 단점을 설명하고 마지막으로 가장 좋은 방법을 강조하겠습니다.
1. <머리>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js"></script>
</head>
<body>
</body>
</html>
이 접근 방식에서는 본문 내부의 HTML보다 먼저 로드된 코드 자바스크립트 파일을 구문 분석하는 동안 JavaScript가 아직 구문 분석되지 않은 본문의 요소를 조작하려고 하면 HTML 콘텐츠가 완전히 완료되지 않았기 때문에 오류가 발생할 수 있습니다. 로드되었습니다.
이러한 차단 동작은 페이지 나머지 부분의 구문 분석 및 렌더링을 지연시켜 성능과 사용자 경험에 영향을 미칩니다.
2. <본문> (마지막으로)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="custom.js"></script>
</body>
</html>
이 접근 방식에서는 JavaScript가 로드 및 실행되기 전에 HTML이 완전히 구문 분석되어 DOM 요소 누락과 관련된 오류를 방지합니다. 이 접근 방식은 모두 좋지만 HTML 구문 분석과 JavaScript 로딩이 순차적으로 발생하기 때문에 두 프로세스가 서로 다른 시간에 발생하므로 전체적으로 시간이 더 오래 걸릴 수 있습니다
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js" async></script>
</head>
<body>
</body>
</html>
이 접근 방식에서는 JavaScript를 비동기식으로 만들어 HTML 로드를 차단하지 않습니다. HTML 구문 분석과 JavaScript 로딩은 모두 병렬로 발생합니다. 그러나 HTML이 완전히 구문 분석되기 전에 JavaScript가 실행되고 js가 아직 로드되지 않은 html 요소를 조작하려고 하면 오류가 발생할 수 있습니다.
참고: — 이 접근 방식은 시간을 절약할 수 있지만 html,js를 동시에 로드하지만 오류에 더 취약합니다
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="custom.js" defer></script>
</head>
<body>
</body>
</html>
이 접근 방식은 HTML 구문 분석과 JavaScript 로드가 동시에 발생하는 세 번째 접근 방식과 유사합니다. 그러나 JavaScript가 먼저 로드되더라도 브라우저는 스크립트를 실행하기 전에 HTML이 완전히 구문 분석될 때까지 기다립니다
요약: 최선의 접근 방식
가장 좋은 방법은 일반적으로 다음을 사용하는 것입니다.
이유:
- HTML 구문 분석(비차단 다운로드)을 차단하지 않습니다.
- DOM이 완전히 구문 분석된 후 스크립트가 실행되도록 하여 DOM 요소를 더 안전하게 조작할 수 있습니다.
- 연기된 스크립트가 여러 개인 경우 스크립트 실행 순서를 유지합니다.
스크립트가 DOM 콘텐츠(예: 추적 스크립트 또는 광고)와 독립적인 경우 더 나은 성능을 위해 비동기를 사용할 수 있습니다.
위 내용은 HTML에 Javascript 파일을 추가하는 가장 좋은 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!