HTML에 Javascript 파일을 추가하는 가장 좋은 방법-JS 튜토리얼-php.cn

HTML에 Javascript 파일을 추가하는 가장 좋은 방법

Barbara Streisand

풀어 주다： 2024-10-09 20:33:28

원래의

740명이 탐색했습니다.

Best Way to add Javascript file in HTML

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 로딩이 순차적으로 발생하기 때문에 두 프로세스가 서로 다른 시간에 발생하므로 전체적으로 시간이 더 오래 걸릴 수 있습니다

<!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를 동시에 로드하지만 오류에 더 취약합니다

<!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이 완전히 구문 분석될 때까지 기다립니다