Computer >> 컴퓨터 >  >> 프로그래밍 >> 프로그래밍

JavaScript 통합 마스터하기:HTML 성능 모범 사례

소개

이 문서에서는 HTML 파일에 JavaScript를 추가하는 방법에 대한 포괄적인 개요를 제공하고 세 가지 핵심 방법인 <head>에 스크립트를 인라인으로 배치하는 방법을 자세히 설명합니다. , <body>의 인라인 , 외부 .js에 연결 파일. 이 기사에서는 단순한 '방법'을 넘어 중요한 '이유'에 대해 자세히 알아보고 렌더링 차단, 브라우저 캐싱, 지연 및 비동기와 같은 최신 속성의 사용 등 각 접근 방식이 성능에 미치는 중요한 영향을 설명합니다.

이론과 실습을 연결하기 위해 튜토리얼에는 어두운 모드 토글 만들기 및 웹 양식 유효성 검사와 같은 실용적이고 실제적인 예가 포함되어 있습니다. 마지막으로 브라우저의 개발자 콘솔을 사용하여 흔히 발생하는 초보자 오류를 해결하는 데 도움이 되는 깔끔하고 유지 관리 가능한 코드 작성을 위한 필수 모범 사례와 문제 해결 가이드를 제공하여 자신 있게 웹 개발 프로젝트를 시작할 수 있도록 돕습니다.

JavaScript 프로젝트를 신속하게 배포해야 합니까? DigitalOcean 앱 플랫폼을 확인하고 몇 분 안에 GitHub에서 직접 JS 프로젝트를 배포하세요.

주요 시사점

  • 자바스크립트를 추가하는 가장 좋은 방법은 외부 .js을 사용하는 것입니다. 더 나은 구성, 유지 관리 및 재사용성을 위한 파일입니다.
  • <script> 배치 중 <head>의 태그 렌더링을 차단하여 사용자에게 빈 페이지를 표시하게 하므로 성능이 최악입니다.
  • defer 사용 외부 스크립트의 속성은 최적의 성능을 위해 권장되는 최신 접근 방식입니다.
  • 외부 JavaScript 파일은 인라인 스크립트가 제공하지 않는 브라우저 캐싱을 통해 상당한 성능 향상을 제공합니다.
  • 단일 .js 파일을 여러 페이지에 걸쳐 연결할 수 있으므로 업데이트 및 유지 관리가 훨씬 더 효율적입니다.
  • 개발자 콘솔(F12)은 일반적인 자바스크립트 오류를 해결하는 데 가장 중요한 도구입니다.

방법 1:<head>에 인라인 스크립트를 추가하는 방법

전용 HTML 태그 <script>를 사용하여 HTML 문서에 JavaScript 코드를 추가할 수 있습니다. JavaScript 코드를 둘러싸는 것입니다. <script> 태그는 <head>에 배치될 수 있습니다. HTML 섹션 또는 <body> 섹션은 JavaScript를 로드하려는 시점에 따라 달라집니다.

일반적으로 JavaScript 코드는 <head> 문서 내부에 들어갈 수 있습니다. 섹션을 HTML 문서의 주요 내용에 포함시키지 않도록 유지하세요.

브라우저 제목이 Today's Date인 다음 기본 HTML 문서를 고려해 보겠습니다. :

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
</head>
 
<body>
</body>
 
</html>

경고를 생성하는 스크립트를 추가하려면 <script>를 추가하면 됩니다. 태그와 <title> 아래의 JavaScript 코드 태그는 아래와 같습니다:

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
 <script>
 let d = new Date();
 alert("Today's date is " + d);
 </script>
</head>
 
<body>
</body>
 
</html>

여기에 스크립트를 배치하면 브라우저가 <body>의 콘텐츠 렌더링을 시작하기 전에 JavaScript를 구문 분석하고 실행하라는 신호를 보냅니다. 페이지의.

이 접근 방식은 페이지의 요소와 직접 상호 작용할 필요가 없는 스크립트에 가장 적합합니다. <head>의 스크립트가 실행되면 브라우저는 아직 문서 개체 모델(DOM)을 구축하지 않았습니다. <body>의 경우 . 이는 제목, 단락 또는 div와 같은 HTML 요소가 아직 존재하지 않음을 의미합니다. 결과적으로 이러한 요소를 찾거나 수정하려고 시도하는 코드(예:document.getElementById() 사용) ) 실패할 것입니다. 따라서 이 방법은 나중에 사용하기 위해 함수와 변수를 설정하거나 최대한 빨리 로드해야 하는 타사 분석 스크립트를 포함하는 데 이상적입니다.

페이지를 로드하면 다음과 유사한 알림을 받게 됩니다:

JavaScript 통합 마스터하기:HTML 성능 모범 사례

방법 2:<body>에 인라인 스크립트를 추가하는 방법

<script> 태그는 <body>에도 배치할 수 있습니다. 섹션. 여기에 스크립트가 배치되면 HTML 파서는 문서에 나타나는 정확한 지점에서 스크립트를 실행하기 위해 작업을 일시 중지합니다. 이는 HTML 요소를 즉시 찾아서 수정해야 하는 모든 JavaScript 코드에 필요한 방법입니다.

일반적인 모범 사례는 닫는 </body> 바로 앞에 스크립트를 배치하는 것입니다. 태그. 이렇게 배치하면 페이지의 모든 HTML 요소가 구문 분석되어 스크립트 실행이 시작되기 전에 DOM에서 사용할 수 있습니다. 또한 브라우저가 눈에 보이는 모든 텍스트와 이미지를 먼저 렌더링할 수 있으므로 시간이 많이 걸릴 수 있는 JavaScript가 실행되기 전에 사용자가 페이지 콘텐츠를 볼 수 있으므로 인지된 페이지 성능도 향상됩니다. 이렇게 하면 JavaScript 실행으로 인해 콘텐츠가 차단되지 않고 표시될 수 있습니다.

이 방법을 사용하여 HTML 본문에 날짜를 직접 작성해 보겠습니다.

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
</head>
 
<body>
 <script>
 let d = new Date();
 document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
 </script>
</body>
 
</html>

웹 브라우저를 통해 로드된 위 HTML 문서의 출력은 다음과 유사합니다.

JavaScript 통합 마스터하기:HTML 성능 모범 사례

작거나 한 페이지에서만 실행되는 스크립트는 HTML 파일 내에서 잘 작동할 수 있지만, 큰 스크립트나 여러 페이지에서 사용되는 스크립트의 경우 포함하기 어렵거나 읽고 이해하기 어려울 수 있으므로 그다지 효과적인 솔루션이 아닙니다. 다음 섹션에서는 HTML 문서에서 별도의 JavaScript 파일을 처리하는 방법을 살펴보겠습니다.

방법 3:별도의 JavaScript 파일로 작업하는 방법

여러 페이지에 걸쳐 사용해야 하는 더 큰 스크립트나 코드의 경우 가장 효과적이고 전문적인 솔루션은 JavaScript를 .js이 포함된 별도의 파일에 배치하는 것입니다. 확장. 그런 다음 <script>를 사용하여 HTML에서 이 외부 파일에 연결할 수 있습니다. src 태그 (소스) 속성입니다.

이 접근 방식의 이점은 매우 큽니다.

  • 우려사항 분리 :구조를 위한 HTML, 스타일을 위한 CSS, 상호작용을 위한 JavaScript를 별도의 파일에 보관합니다. 이렇게 하면 프로젝트가 더욱 깔끔하고 체계화되며 디버그하기 쉬워집니다.
  • 재사용성 및 유지관리 :main-navigation.js와 같은 단일 스크립트 파일 , 웹사이트의 모든 페이지에서 링크될 수 있습니다. 탐색 로직을 업데이트해야 하는 경우 해당 파일 하나만 편집하면 됩니다.
  • 브라우저 캐싱 :사용자가 처음으로 사이트를 방문하면 브라우저에서 .js 파일을 다운로드합니다. 이후 방문 시 또는 동일한 파일을 사용하는 다른 페이지로 이동할 때 브라우저는 해당 파일을 다시 다운로드하는 대신 저장된(캐시된) 복사본을 사용합니다. 이로 인해 로딩 시간이 대폭 향상됩니다.

JavaScript 문서를 HTML 문서에 연결하는 방법을 보여주기 위해 작은 웹 프로젝트를 만들어 보겠습니다. script.js으로 구성됩니다. js/에서 디렉토리, style.css css/에서 디렉토리 및 기본 index.html 프로젝트 루트에 있습니다.

project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html

날짜를 <h1>로 표시하는 JavaScript 코드를 이동해 보겠습니다. script.js 헤더 파일:

script.js

let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

다음으로 style.css도 편집해 보겠습니다. <h1>에 배경색과 스타일을 추가하여 파일을 만드세요. 헤더:

스타일.css

body {
 background-color: #0080ff;
}
 
h1 {
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
}

마지막으로 index.html에서 스크립트와 스타일시트를 모두 참조할 수 있습니다. 파일. 우리는 <link>을 사용합니다 <head>의 태그 CSS 및 <script>의 경우 src 태그 <body>의 속성 자바스크립트를 위한 것입니다.

index.html

<!DOCTYPE html>
<html lang="en-US">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Today's Date</title>
 <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
 <script src="js/script.js"></script>
</body>
 
</html>

이제 JavaScript와 CSS를 사용하면 프로젝트가 훨씬 더 체계화됩니다. index.html를 로드할 때 웹 브라우저에 페이지를 열면 다음과 유사한 현재 날짜의 스타일이 지정된 페이지가 표시됩니다.

JavaScript 통합 마스터하기:HTML 성능 모범 사례

이제 JavaScript를 파일에 배치했으므로 추가 웹 페이지에서 동일한 방식으로 이를 호출하고 단일 위치에서 모두 업데이트할 수 있습니다. 이 방법은 웹 프로젝트에서 JavaScript를 관리하는 가장 체계적이고 확장 가능한 방법을 제공합니다. 외부 스크립트가 로드되는 방식을 더 자세히 제어하려면 async를 사용하는 방법을 살펴보세요. 및 defer <script>의 속성 태그.

실제 사례에는 어떤 것이 있나요?

지금까지 배운 내용을 바탕으로 실제 사례를 살펴보겠습니다.

1. 간단한 다크 모드 토글

거의 모든 최신 웹사이트나 앱은 다크 모드를 제공합니다. JavaScript로 CSS 클래스를 전환하면 이를 달성할 수 있습니다.

HTML: 

<!DOCTYPE html>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Dark Mode</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <button id="theme-toggle">Toggle Dark Mode</button>
 <h1 id="title">DigitalOcean</h1>
 <p>This is some example text on the page.</p>
 <script src="js/script.js"></script>
</body>
</html>

CSS: 

/* This class will be added or removed by JavaScript */
.dark-mode {
 background-color: #222;
 color: #eee;
}

자바스크립트: 

const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
 document.body.classList.toggle('dark-mode');
});

JavaScript는 먼저 ID를 사용하여 버튼을 찾습니다. 그런 다음 클릭을 기다리는 이벤트 리스너를 연결합니다. 버튼을 클릭하면 classList.toggle('dark-mode') 명령이 실행됩니다. <body>인 경우 요소에 .dark-mode가 없습니다. 클래스, JavaScript가 추가됩니다. 이미 있는 경우 JavaScript가 이를 제거합니다. 브라우저는 해당 클래스와 관련된 CSS 스타일을 즉시 적용합니다.

2. 기본 양식 확인

웹사이트에서는 사용자가 양식을 제출하기 전에 양식을 올바르게 작성했는지 확인해야 합니다. JavaScript는 페이지를 다시 로드하지 않고도 이를 즉시 확인할 수 있습니다.

HTML: 

<!DOCTYPE html>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Form Validator</title>
</head>
<body>
 <form id="contact-form">
 <label for="email">Email:</label>
 <input type="text" id="email" placeholder="you@example.com">
 <button type="submit">Subscribe</button>
 <p id="error-message" style="color: red;"></p>
 </form>
 <script src="js/script.js"></script>
</body>
</html>

자바스크립트: 

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
contactForm.addEventListener('submit', function(event) {
 if (!emailInput.value.includes('@')) {
 event.preventDefault(); 
 
 errorMessage.textContent = 'Please enter a valid email address.';
 } else {
 errorMessage.textContent = '';
 }
});

스크립트는 submit을 수신합니다. 양식에 이벤트가 있습니다. "Subscribe"를 클릭하면 버튼을 누르면 기능이 실행됩니다. 먼저 이메일 입력 내부의 텍스트에 @가 포함되어 있는지 확인합니다. 기호.

  • 그렇지 않으면 event.preventDefault() 양식의 기본 제출 동작을 중지합니다. 그런 다음 사용자에게 유용한 오류 메시지를 표시합니다.
  • 그렇다면 스크립트는 아무 작업도 수행하지 않으며 양식은 평소대로 제출됩니다.

각 방법의 성능 고려사항은 무엇인가요?

논의된 각 JavaScript 로딩 방법에 대한 주요 성능 고려 사항을 논의해 보겠습니다.

<head>의 인라인 스크립트

  • 주요 문제: 렌더링 차단

    <head>에 스크립트 배치 성능에 가장 큰 부정적인 영향을 미칩니다. 브라우저는 페이지의 <body> 일부를 렌더링하기 전에 JavaScript를 다운로드하고 구문 분석하고 실행해야 합니다. . 스크립트가 크거나 느리게 실행되는 경우 사용자는 스크립트가 완료될 때까지 빈 흰색 페이지를 응시하게 됩니다. 이로 인해 첫 번째 콘텐츠가 포함된 페인트(FCP)에 걸리는 시간이 늘어납니다. , 중요한 사용자 경험 측정항목입니다.

  • 캐싱: 없음

    인라인 스크립트는 HTML 문서 자체의 일부입니다. 브라우저에서는 별도로 캐시할 수 없습니다. 사용자가 페이지를 방문할 때마다 스크립트가 다시 다운로드되어 나머지 HTML과 함께 다시 구문 분석됩니다.

이 방법은 일반적으로 성능 면에서 최악이므로 스크립트가 매우 작거나 반드시 다른 것보다 먼저 실행되어야 하는 경우를 제외하고는 피해야 합니다.

<body>의 인라인 스크립트

  • 주요 문제: 부분 렌더링 차단

    이 방법은 <head>에 스크립트를 배치하는 것보다 크게 개선되었습니다. . 브라우저는 <script>를 만날 때까지 HTML을 구문 분석하고 렌더링합니다. 태그. 그 시점에서 스크립트 실행을 위해 렌더링을 중지합니다. <body> 맨 끝에 스크립트를 배치하여 (</body> 바로 앞) 태그) 표시되는 전체 페이지가 먼저 렌더링되도록 허용합니다.

  • 캐싱: 없음

    <head>의 스크립트와 같습니다. , <body>의 인라인 스크립트 HTML의 일부이므로 독립적으로 캐시할 수 없습니다.

본문 끝부분에 스크립트를 배치하는 것은 내용이 빨리 눈에 띄기 때문에 속도감 향상에 좋은 전략입니다. 그러나 페이지가 완전히 상호작용하는 데는 여전히 지연이 발생할 수 있습니다.

외부 자바스크립트 파일

이 방법은 주로 브라우저 캐싱과 특수 로드 속성이라는 두 가지 요소로 인해 최고의 유연성과 최고의 성능을 제공합니다.

  • 주요 장점: 캐싱 및 비동기 로딩

    • 캐싱 :역대 최대 실적 승리다. 외부 .js 파일은 첫 번째 방문 시 한 번 다운로드됩니다. 동일한 스크립트를 사용하는 모든 후속 페이지에 대해 브라우저는 로컬 캐시에서 파일을 로드하여 네트워크 지연을 제거하고 사이트 속도를 크게 향상시킵니다.

    • defer 및 async 속성: 외부 스크립트는 두 가지 강력한 속성의 사용을 잠금 해제합니다.

      • <script defer src="..."></script> :브라우저가 HTML 구문 분석을 계속하는 동안 백그라운드에서 스크립트를 다운로드하도록 지시합니다. 스크립트는 전체 문서가 구문 분석된 후에만 실행됩니다. 이는 비차단 방식이고 스크립트가 HTML에 나타나는 순서대로 실행되도록 보장하므로 권장되는 최신 접근 방식입니다.

      • <script async src="..."></script> :또한 렌더링을 차단하지 않고 백그라운드에서 스크립트를 다운로드합니다. 그러나 다운로드가 완료되는 순간 스크립트를 실행하며, 이는 언제든지 발생할 수 있으며 렌더링을 중단할 수 있습니다. 실행 순서가 중요하지 않은 독립적인 제3자 스크립트(예:광고 또는 분석)에 가장 적합합니다.

defer와 연결된 외부 파일 사용 속성은 최적의 성능을 위한 모범 사례입니다. 비차단 로딩의 이점과 강력한 브라우저 캐싱을 결합합니다.

모범 사례에는 어떤 것이 있나요?

다음은 HTML 파일에서 JavaScript 작업을 위한 몇 가지 필수 모범 사례와 문제 해결 팁입니다.

  • 외부 파일에 JavaScript 유지 :항상 .js에 연결하는 것을 선호합니다. 파일(<script src="..."></script> ) HTML에 JavaScript를 직접 작성하는 대신. 이렇게 하면 코드가 체계적으로 정리되고 유지 관리가 더 쉬워지며 브라우저가 더 빠른 로드를 위해 파일을 캐시할 수 있습니다.
  • <body> 끝에서 스크립트 로드 defer로 :최상의 사용자 경험을 위해 <script>를 배치하세요. 닫는 </body> 바로 앞의 태그 태그를 지정하고 defer를 추가하세요. 속성. 이렇게 하면 JavaScript에 의해 차단되지 않고 페이지 콘텐츠가 빠르게 로드되고 표시됩니다.
  • 읽을 수 있는 코드 작성 :변수와 함수에 명확하고 설명이 포함된 이름을 사용하세요(예:calculateTotalPrice) calc 대신 ). 주석 // 사용 코드의 기능이 아닌 왜 코드를 작성했는지 설명하기 위해.
  • 반복하지 마세요(DRY) :여러 위치에서 동일한 코드 줄을 작성하는 경우 해당 코드를 함수로 래핑하세요. 그러면 필요할 때마다 해당 함수를 호출할 수 있으므로 코드가 더 짧아지고 업데이트가 쉬워집니다.

일반적인 문제는 무엇이며 이를 해결하는 방법은 무엇입니까?

스크립트가 작동하지 않더라도 당황하지 마세요! 브라우저의 개발자 도구는 가장 친한 친구입니다. F12 누르기 (또는 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택합니다. ) '콘솔'을 클릭합니다. 탭. 대부분의 오류는 여기에 빨간색으로 표시됩니다.

  • 오류:'null 속성을 읽을 수 없습니다.' 또는 '정의되지 않았습니다.'

    • 의미 :JavaScript가 아직 로드되지 않은 HTML 요소에 액세스하려고 했습니다.
    • 솔루션 :이는 거의 항상 <script>를 의미합니다. 태그가 <head>에 있습니다. 또는 <body>에서 너무 높은 위치에 있습니다. . 스크립트를 <body> 맨 아래로 이동하세요. defer 속성을 추가하세요.

  • 오류:'잡히지 않은 구문 오류'

    • 의미 :코드에 오타가 있습니다.
    • 솔루션 :콘솔은 일반적으로 줄 번호를 제공합니다. 누락된 괄호 ()가 있는지 해당 줄을 자세히 살펴보십시오. , 중괄호 {} , "" 인용 , 또는 기타 오타.

  • 문제:스크립트가 실행되지 않고 콘솔에 오류가 없습니다.

    • 의미 :HTML 파일이 .js을 찾지 못할 수도 있습니다. 파일.
    • 솔루션 :'네트워크'를 확인하세요. 개발자 도구 탭에서 404 오류와 함께 나열된 스크립트 파일이 표시되면 src의 파일 경로 속성이 잘못되었습니다. 철자와 폴더 구조(예:<script src="js/script.js"></script>)를 다시 확인하세요. ).

  • 문제:코드가 실행되지만 예상한 대로 작동하지 않습니다.

    • 의미 :이것은 논리 오류입니다. 구문은 정확하지만 단계가 잘못되었습니다.

    • 해결책 :console.log()를 사용하세요. 디버깅합니다. 다양한 단계에서 변수 값을 인쇄하려면 코드에 배치하세요. 이를 통해 논리를 추적하고 어디에서 잘못되었는지 정확히 확인할 수 있습니다.

      let userRole = 'guest';
console.log('User role before check:', userRole); // See what the value is
if (userIsAdmin) {
 userRole = 'admin';
}

자주 묻는 질문(FAQ)

1. 내 HTML 파일에 JavaScript를 추가하는 가장 좋은 방법은 무엇입니까?

가장 좋은 방법은 외부 .js에 연결하는 것입니다. defer이 포함된 파일 속성, 닫는 </body> 바로 앞에 스크립트 태그를 배치합니다. 태그(예:<script src="path/to/script.js" defer></script> ).

2. JavaScript를 헤드에 넣어야 할까요, 아니면 본문에 넣어야 할까요?

거의 항상 JavaScript <script>를 입력해야 합니다. <body> 맨 끝에 있는 태그 섹션, </body> 닫기 직전 태그.

<head>에 스크립트 배치 페이지 렌더링을 차단합니다. 즉, 스크립트가 완전히 다운로드되어 실행될 때까지 사용자에게 빈 흰색 페이지가 표시됩니다. <body> 끝에 스크립트를 배치하면 을 사용하면 브라우저가 전체 HTML과 CSS를 먼저 렌더링할 수 있으므로 사용자는 콘텐츠를 훨씬 더 빠르게 볼 수 있습니다.

3. 하나의 HTML 파일에 여러 스크립트 태그를 추가할 수 있나요?

예, <script>를 원하는 만큼 포함할 수 있습니다. 단일 HTML 파일에 필요한 태그를 추가합니다. 브라우저는 문서에 나타나는 순서대로 다운로드하여 실행합니다.

이는 일반적으로 타사 라이브러리에 의존하는 사용자 정의 스크립트를 로드하기 전에 로드하는 데 사용됩니다.

<body>
 <script src="library.js"></script> 
 
 <script src="my-app.js"></script> 
</body>

4. async의 주요 차이점은 무엇인가요? 및 defer ?

두 속성 모두 페이지 렌더링을 차단하지 않고 스크립트를 로드합니다. 주요 차이점은 defer입니다. 문서가 완전히 구문 분석된 후 나타나는 순서대로 스크립트가 실행되도록 보장하는 반면, async 순서에 관계없이 다운로드되는 즉시 스크립트를 실행합니다.

5. 작동하지 않는 JavaScript를 어떻게 디버깅하나요?

브라우저 개발자 도구 열기 (F12), 콘솔을 확인하세요. 오류 메시지 탭을 보려면 네트워크를 사용하세요. 탭을 클릭하여 파일 로드를 확인하고 console.log()을 추가하세요. 변수 값을 추적하는 명령문입니다.

결론

이 튜토리얼에서는 JavaScript를 HTML에 추가하는 세 가지 핵심 방법인 <head>의 인라인 방법을 배웠습니다. , <body>의 인라인 , 외부 .js에 연결 파일. 또한 렌더링 차단, 브라우저 캐싱, defer 등 성능에 미치는 영향도 살펴보았습니다. 및 async 개발자 콘솔을 사용한 실제 사례 및 문제 해결 가이드와 함께 속성을 제공합니다.

이제 사용 사례에 적합한 JavaScript 로딩 전략을 선택하고, 외부 파일을 사용하여 깔끔하고 유지 관리 가능한 코드를 작성하고, 브라우저 개발자 도구를 사용하여 일반적인 오류를 디버깅할 수 있습니다. 외부 .js 사용 defer가 있는 파일 속성은 대부분의 프로덕션 웹 프로젝트에 권장되는 접근 방식입니다.

계속해서 JavaScript 기술을 쌓으려면 다음 튜토리얼을 살펴보세요:

  • JavaScript 개발자 콘솔 사용 방법
  • JavaScript로 댓글 작성하는 방법
  • JavaScript의 구문 및 코드 구조 이해
  • JavaScript의 변수, 범위 및 호이스팅 이해

JavaScript 통합 마스터하기:HTML 성능 모범 사례 이 저작물은 Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International에 따라 라이센스가 부여됩니다. 라이센스.