home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> การเขียนโปรแกรม

การเรียนรู้การรวม JavaScript:แนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพ HTML

บทนำ

บทความนี้จะให้ภาพรวมที่ครอบคลุมของการเพิ่ม JavaScript ให้กับไฟล์ HTML ของคุณ โดยมีรายละเอียดวิธีการหลักสามวิธี:การวางสคริปต์ในบรรทัดใน 00 , แบบอินไลน์ใน 16 และเชื่อมโยงไปยัง 20 ภายนอก ไฟล์. นอกเหนือจาก "อย่างไร" บทความนี้จะเจาะลึก "ทำไม" ที่สำคัญ ซึ่งจะอธิบายผลกระทบด้านประสิทธิภาพที่สำคัญของแต่ละแนวทาง รวมถึงแนวคิดต่างๆ เช่น การบล็อกการแสดงผล การแคชของเบราว์เซอร์ และการใช้แอตทริบิวต์สมัยใหม่ เช่น defer และ async

เพื่อเป็นการเชื่อมโยงทฤษฎีและการปฏิบัติ บทช่วยสอนนี้ประกอบด้วยตัวอย่างที่ใช้งานได้จริง เช่น การสร้างการสลับโหมดมืดและการตรวจสอบความถูกต้องของเว็บฟอร์ม สุดท้ายนี้ จะจัดเตรียมแนวทางปฏิบัติที่ดีที่สุดที่จำเป็นสำหรับการเขียนโค้ดที่สะอาดและบำรุงรักษาได้ และคำแนะนำในการแก้ปัญหาเพื่อช่วยคุณแก้ไขข้อผิดพลาดทั่วไปสำหรับผู้เริ่มต้นโดยใช้คอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ เพื่อให้มั่นใจว่าคุณสามารถเริ่มโครงการพัฒนาเว็บได้อย่างมั่นใจ

ต้องการปรับใช้โปรเจ็กต์ JavaScript อย่างรวดเร็วหรือไม่? ลองใช้แพลตฟอร์มแอป DigitalOcean และปรับใช้โปรเจ็กต์ JS โดยตรงจาก GitHub ได้ในไม่กี่นาที

ประเด็นสำคัญ

  • แนวทางปฏิบัติที่ดีที่สุดในการเพิ่ม JavaScript คือการใช้ 37 ภายนอก ไฟล์เพื่อการจัดระเบียบ การบำรุงรักษา และการนำกลับมาใช้ใหม่ที่ดีขึ้น
  • การวาง 48 แท็กใน 53 มีประสิทธิภาพแย่ที่สุดเนื่องจากมีการบล็อกการแสดงผล ทำให้ผู้ใช้ต้องเห็นหน้าว่าง
  • การใช้ 60 คุณลักษณะในสคริปต์ภายนอกเป็นแนวทางสมัยใหม่ที่แนะนำเพื่อประสิทธิภาพสูงสุด
  • ไฟล์ JavaScript ภายนอกนำเสนอการเพิ่มประสิทธิภาพที่สำคัญผ่านการแคชของเบราว์เซอร์ ซึ่งสคริปต์แบบอินไลน์ไม่สามารถทำได้
  • 70 เดียว ไฟล์สามารถเชื่อมโยงข้ามหลายหน้าได้ ทำให้การอัปเดตและการบำรุงรักษามีประสิทธิภาพมากขึ้น
  • แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ (F12) เป็นเครื่องมือที่สำคัญที่สุดในการแก้ปัญหาข้อผิดพลาดทั่วไปของ JavaScript

วิธีที่ 1:วิธีเพิ่มสคริปต์อินไลน์ไปที่ 89

คุณสามารถเพิ่มโค้ด JavaScript ในเอกสาร HTML ได้โดยใช้แท็ก HTML เฉพาะ 92 ที่ล้อมรอบโค้ด JavaScript 102 แท็กสามารถวางไว้ใน 116 ของ HTML ของคุณหรือใน 120 ขึ้นอยู่กับว่าคุณต้องการให้ JavaScript โหลดเมื่อใด

โดยทั่วไป โค้ด JavaScript สามารถเข้าไปอยู่ในเอกสาร 135 เพื่อที่จะเก็บไว้และไม่อยู่ในเนื้อหาหลักของเอกสาร HTML ของคุณ

ลองพิจารณาเอกสาร HTML พื้นฐานต่อไปนี้ที่มีชื่อเบราว์เซอร์เป็น 146 :

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>

หากต้องการเพิ่มสคริปต์ที่สร้างการแจ้งเตือน เราสามารถเพิ่ม 155 ได้ และโค้ด JavaScript ของเราด้านล่าง 168 แท็ก ดังที่แสดงด้านล่าง:

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>

การวางสคริปต์ที่นี่จะส่งสัญญาณให้เบราว์เซอร์แยกวิเคราะห์และรัน JavaScript ก่อนที่จะเริ่มแสดงผลเนื้อหาใน 178 ของเพจ

แนวทางนี้เหมาะที่สุดสำหรับสคริปต์ที่ไม่จำเป็นต้องโต้ตอบกับองค์ประกอบบนเพจโดยตรง เมื่อสคริปต์อยู่ใน 181 ทำงาน เบราว์เซอร์ยังไม่ได้สร้าง Document Object Model (DOM) สำหรับ 195 . ซึ่งหมายความว่ายังไม่มีองค์ประกอบ HTML เช่น ส่วนหัว ย่อหน้า หรือ div เป็นผลให้โค้ดที่พยายามค้นหาหรือแก้ไของค์ประกอบเหล่านี้ (เช่น การใช้ 206 ) จะล้มเหลว ดังนั้นวิธีนี้จึงเหมาะสำหรับการตั้งค่าฟังก์ชันและตัวแปรเพื่อใช้ในภายหลัง หรือสำหรับรวมสคริปต์การวิเคราะห์ของบุคคลที่สามที่ต้องโหลดโดยเร็วที่สุด

เมื่อคุณโหลดหน้าเว็บ คุณจะได้รับการแจ้งเตือนที่คล้ายกับสิ่งนี้:

การเรียนรู้การรวม JavaScript:แนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพ HTML

วิธีที่ 2:วิธีเพิ่มสคริปต์อินไลน์ใน 217

229 แท็กสามารถวางไว้ใน 238 ได้ ส่วน เมื่อวางสคริปต์ไว้ที่นี่ ตัวแยกวิเคราะห์ HTML จะหยุดทำงานชั่วคราวเพื่อรันสคริปต์ ณ ตำแหน่งที่ปรากฏในเอกสาร นี่เป็นวิธีการที่จำเป็นสำหรับโค้ด JavaScript ที่ต้องการค้นหาและแก้ไของค์ประกอบ HTML ทันที

แนวทางปฏิบัติที่ดีที่สุดโดยทั่วไปคือการวางสคริปต์ไว้หน้าแท็กปิด 244 แท็ก ตำแหน่งนี้ช่วยให้แน่ใจว่าองค์ประกอบ 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 แต่สำหรับสคริปต์ขนาดใหญ่หรือสคริปต์ที่จะใช้กับหลายหน้า นี่ไม่ใช่วิธีแก้ปัญหาที่มีประสิทธิภาพมากนัก เนื่องจากการรวมไว้อาจทำให้ยุ่งยากหรืออ่านและทำความเข้าใจได้ยาก ในส่วนถัดไป เราจะอธิบายวิธีจัดการไฟล์ JavaScript แยกต่างหากในเอกสาร HTML ของคุณ

วิธีที่ 3:วิธีทำงานกับไฟล์ JavaScript แยก

สำหรับสคริปต์หรือโค้ดขนาดใหญ่ที่จำเป็นต้องใช้ในหลายหน้า วิธีแก้ปัญหาที่มีประสิทธิภาพและเป็นมืออาชีพมากที่สุดคือการวาง JavaScript ไว้ในไฟล์แยกต่างหากโดยมี 257 ส่วนขยาย จากนั้น คุณสามารถเชื่อมโยงไปยังไฟล์ภายนอกนี้จาก HTML ของคุณโดยใช้ 261 แท็กด้วย 274 (ที่มา) แอตทริบิวต์

ประโยชน์ของแนวทางนี้มีนัยสำคัญ:

  • การแยกข้อกังวล :จะเก็บ HTML ของคุณไว้สำหรับโครงสร้าง, CSS ไว้สำหรับใส่สไตล์ และ JavaScript ไว้สำหรับการโต้ตอบในไฟล์แยกกัน ซึ่งจะทำให้โปรเจ็กต์ของคุณสะอาดขึ้น เป็นระเบียบมากขึ้น และแก้ไขข้อบกพร่องได้ง่ายขึ้น
  • การนำกลับมาใช้ใหม่และการบำรุงรักษา :ไฟล์สคริปต์เดียว เช่น 288 , สามารถเชื่อมโยงได้จากทุกหน้าของเว็บไซต์ของคุณ หากคุณต้องการอัปเดตตรรกะการนำทาง คุณจะต้องแก้ไขไฟล์นั้นเพียงไฟล์เดียวเท่านั้น
  • การแคชเบราว์เซอร์ :เมื่อผู้ใช้เยี่ยมชมไซต์ของคุณเป็นครั้งแรก เบราว์เซอร์จะดาวน์โหลดไฟล์ .js ในการเข้าชมครั้งต่อไปหรือเมื่อนำทางไปยังหน้าอื่นที่ใช้ไฟล์เดียวกัน เบราว์เซอร์จะใช้สำเนาที่เก็บไว้ (แคช) แทนที่จะดาวน์โหลดอีกครั้ง ซึ่งจะช่วยปรับปรุงเวลาในการโหลดได้อย่างมาก

เพื่อสาธิตวิธีการเชื่อมต่อเอกสาร JavaScript กับเอกสาร HTML เรามาสร้างโครงการเว็บขนาดเล็กกัน จะประกอบด้วย 297 ใน 305 ไดเรกทอรี 311 ใน 323 ไดเร็กทอรีและ 333 หลัก ในรากของโครงการ

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

มาย้ายโค้ด JavaScript ที่จะแสดงวันที่เป็น 343 กันดีกว่า ส่วนหัวของ 354 ไฟล์:

script.js

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

ต่อไป มาแก้ไข 361 ด้วย โดยเพิ่มสีพื้นหลังและสไตล์ให้กับ 379 ส่วนหัว:

style.css

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

สุดท้ายนี้ เราสามารถอ้างอิงทั้งสคริปต์และสไตล์ชีทได้จาก 381 ของเรา ไฟล์. เราใช้ 397 แท็กใน 409 สำหรับ CSS และ 419 แท็กด้วย 422 แอตทริบิวต์ใน 433 สำหรับจาวาสคริปต์

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 โปรเจ็กต์ของเราก็มีระเบียบมากขึ้น เมื่อเราโหลด 443 เข้าสู่เว็บเบราว์เซอร์ เราควรเห็นหน้าสไตล์ที่มีวันที่ปัจจุบันที่มีลักษณะคล้ายกับต่อไปนี้:

การเรียนรู้การรวม JavaScript:แนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพ HTML

ตอนนี้เราได้วาง JavaScript ไว้ในไฟล์แล้ว เราสามารถเรียกมันในลักษณะเดียวกันจากหน้าเว็บเพิ่มเติม และอัปเดตทั้งหมดไว้ในที่เดียว วิธีนี้เป็นวิธีการจัดระเบียบและปรับขนาดได้มากที่สุดในการจัดการ JavaScript ในโครงการเว็บของคุณ หากต้องการควบคุมวิธีการโหลดสคริปต์ภายนอกได้มากขึ้น คุณสามารถดูโดยใช้ 452 และ 466 คุณลักษณะบน 479 แท็ก.

ตัวอย่างในโลกแห่งความเป็นจริงมีอะไรบ้าง

มาดูตัวอย่างจากโลกแห่งความเป็นจริงตามสิ่งที่เราเรียนรู้จนถึงตอนนี้กันดีกว่า

1. สลับโหมดมืดอย่างง่าย

เว็บไซต์หรือแอปสมัยใหม่เกือบทุกแห่งมีโหมดมืด ซึ่งสามารถทำได้โดยการสลับคลาส CSS ด้วย JavaScript

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>

ซีเอสเอส: 

/* 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 ของมัน จากนั้นจะแนบตัวฟังเหตุการณ์ที่รอการคลิก เมื่อคลิกปุ่ม 488 คำสั่งทำงาน ถ้า 495 องค์ประกอบไม่มี 501 คลาส 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 = '';
 }
});

สคริปต์รับฟัง 512 เหตุการณ์บนแบบฟอร์ม เมื่อคุณคลิก 526 ปุ่มฟังก์ชันจะทำงาน ขั้นแรกจะตรวจสอบว่าข้อความภายในอินพุตอีเมลมี 531 หรือไม่ สัญลักษณ์.

  • หากไม่เป็นเช่นนั้น 542 หยุดพฤติกรรมการส่งเริ่มต้นของแบบฟอร์ม จากนั้นจะแสดงข้อความแสดงข้อผิดพลาดที่เป็นประโยชน์แก่ผู้ใช้
  • หากเป็นเช่นนั้น สคริปต์จะไม่ทำอะไรเลย และส่งแบบฟอร์มตามปกติ

ข้อควรพิจารณาด้านประสิทธิภาพสำหรับแต่ละวิธีมีอะไรบ้าง

มาหารือเกี่ยวกับข้อควรพิจารณาด้านประสิทธิภาพหลักสำหรับวิธีการโหลด JavaScript แต่ละวิธีที่กล่าวถึง:

สคริปต์อินไลน์ใน 555

  • ปัญหาหลัก: การบล็อกการแสดงผล

    วางสคริปต์ใน 567 มีผลกระทบเชิงลบต่อประสิทธิภาพที่สำคัญที่สุด เบราว์เซอร์จะต้องดาวน์โหลด แยกวิเคราะห์ และเรียกใช้ JavaScript ก่อนจึงจะสามารถดำเนินการต่อเพื่อแสดงผลส่วนใดๆ ของ 571 ของหน้า . หากสคริปต์ของคุณมีขนาดใหญ่หรือทำงานช้า ผู้ใช้จะจ้องมองที่หน้าว่างสีขาวจนกว่าสคริปต์จะเสร็จสิ้น ซึ่งจะเป็นการเพิ่มเวลาในการ First Contentful Paint (FCP) ซึ่งเป็นตัวชี้วัดประสบการณ์ผู้ใช้ที่สำคัญ

  • แคช: ไม่มี

    สคริปต์อินไลน์เป็นส่วนหนึ่งของเอกสาร HTML เบราว์เซอร์ไม่สามารถแคชแยกกันได้ ทุกครั้งที่ผู้ใช้เข้าชมเพจ สคริปต์จะถูกดาวน์โหลดใหม่และแยกวิเคราะห์ใหม่พร้อมกับ HTML ที่เหลือ

โดยทั่วไปวิธีนี้เป็นวิธีที่แย่ที่สุดสำหรับประสิทธิภาพ และควรหลีกเลี่ยง เว้นแต่สคริปต์จะมีขนาดเล็กมากและต้องทำงานก่อนสิ่งอื่นใด

สคริปต์อินไลน์ใน 583

  • ปัญหาหลัก: การบล็อกการแสดงผลบางส่วน

    วิธีนี้เป็นการปรับปรุงที่สำคัญกว่าการวางสคริปต์ใน 591 . เบราว์เซอร์จะแยกวิเคราะห์และแสดงผล HTML จนกว่าจะพบ 608 แท็ก เมื่อถึงจุดนั้น ระบบจะหยุดการเรนเดอร์เพื่อรันสคริปต์ โดยการวางสคริปต์ไว้ที่ส่วนท้ายสุดของ 614 (ก่อน 628 แท็ก) คุณอนุญาตให้แสดงผลทั้งหน้าที่มองเห็นได้ก่อน

  • แคช: ไม่มี

    เช่นเดียวกับสคริปต์ใน 638 สคริปต์อินไลน์ใน 643 เป็นส่วนหนึ่งของ HTML และไม่สามารถแคชแยกกันได้

การวางสคริปต์ไว้ที่ส่วนท้ายของเนื้อหาเป็นกลยุทธ์ที่ดีในการปรับปรุงการรับรู้เรื่องความเร็ว เนื่องจากเนื้อหาจะมองเห็นได้อย่างรวดเร็ว อย่างไรก็ตาม อาจทำให้เพจไม่สามารถโต้ตอบได้อย่างเต็มที่

ไฟล์จาวาสคริปต์ภายนอก

วิธีการนี้ให้ความยืดหยุ่นสูงสุดและประสิทธิภาพที่ดีที่สุด สาเหตุหลักมาจากสองปัจจัย:การแคชของเบราว์เซอร์และแอตทริบิวต์การโหลดแบบพิเศษ

  • ข้อได้เปรียบหลัก: การแคชและการโหลดแบบอะซิงโครนัส

    • แคช :นี่คือชัยชนะที่ยิ่งใหญ่ที่สุด 650 ภายนอก ไฟล์จะถูกดาวน์โหลดหนึ่งครั้งในการเข้าชมครั้งแรก สำหรับหน้าถัดไปทั้งหมดที่ใช้สคริปต์เดียวกัน เบราว์เซอร์จะโหลดไฟล์จากแคชในเครื่อง ซึ่งช่วยลดความล่าช้าของเครือข่ายและเพิ่มความเร็วของไซต์ได้อย่างมาก

    • 663 และ 670 คุณสมบัติ: สคริปต์ภายนอกจะปลดล็อกการใช้คุณลักษณะที่มีประสิทธิภาพสองประการ

      • 681 :เป็นการบอกให้เบราว์เซอร์ดาวน์โหลดสคริปต์ในเบื้องหลังขณะที่แยกวิเคราะห์ HTML ต่อไป สคริปต์จะถูกดำเนินการหลังจากแยกวิเคราะห์เอกสารทั้งหมดแล้วเท่านั้น นี่เป็นแนวทางสมัยใหม่ที่แนะนำ เนื่องจากไม่มีการบล็อกและรับประกันว่าสคริปต์จะทำงานตามลำดับที่ปรากฏใน HTML

      • 696 :นอกจากนี้ยังดาวน์โหลดสคริปต์ในพื้นหลังโดยไม่ปิดกั้นการเรนเดอร์ อย่างไรก็ตาม สคริปต์จะดำเนินการทันทีที่ดาวน์โหลดเสร็จสิ้น ซึ่งอาจเกิดขึ้นได้ตลอดเวลาและอาจขัดจังหวะการเรนเดอร์ เหมาะที่สุดสำหรับสคริปต์อิสระของบุคคลที่สาม (เช่น โฆษณาหรือการวิเคราะห์) โดยที่ลำดับการดำเนินการไม่สำคัญ

การใช้ไฟล์ภายนอกที่เชื่อมโยงกับ 701 คุณลักษณะคือแนวทางปฏิบัติที่ดีที่สุดเพื่อประสิทธิภาพสูงสุด มันรวมประโยชน์ของการโหลดแบบไม่ปิดกั้นเข้ากับการแคชเบราว์เซอร์ที่ทรงพลัง

แนวทางปฏิบัติที่ดีที่สุดมีอะไรบ้าง

ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับการแก้ปัญหาสำหรับการทำงานกับ JavaScript ในไฟล์ HTML ของคุณ

  • เก็บ JavaScript ไว้ในไฟล์ภายนอก :ต้องการลิงก์ไปยัง 713 เสมอ ไฟล์ (722 ) แทนที่จะเขียน JavaScript โดยตรงใน HTML ของคุณ วิธีนี้ช่วยให้โค้ดของคุณจัดระเบียบ บำรุงรักษาง่ายขึ้น และช่วยให้เบราว์เซอร์แคชไฟล์เพื่อให้โหลดเร็วขึ้น
  • โหลดสคริปต์ที่ส่วนท้ายของ 736 ด้วย 745 :เพื่อประสบการณ์การใช้งานที่ดีที่สุด ให้วาง 759 ของคุณ แท็กก่อนปิด 764 แท็กและเพิ่ม 778 คุณลักษณะ ซึ่งจะทำให้เนื้อหาเพจของคุณโหลดและแสดงได้อย่างรวดเร็วโดยไม่ถูกบล็อกโดย JavaScript
  • เขียนโค้ดที่อ่านได้ :ใช้ชื่อที่ชัดเจนและสื่อความหมายสำหรับตัวแปรและฟังก์ชันของคุณ (เช่น 787 แทนที่จะเป็น 796 ). ใช้ความคิดเห็น 808 เพื่ออธิบายว่าทำไมคุณถึงเขียนโค้ด ไม่ใช่ว่ามันทำอะไร
  • อย่าพูดซ้ำตัวเอง (แห้ง) :หากคุณพบว่าตัวเองกำลังเขียนโค้ดบรรทัดเดียวกันในหลายที่ ให้รวมโค้ดนั้นไว้ในฟังก์ชัน จากนั้นคุณสามารถเรียกใช้ฟังก์ชันนั้นได้ทุกเมื่อที่ต้องการ ทำให้โค้ดของคุณสั้นลงและอัปเดตได้ง่ายขึ้น

ปัญหาทั่วไปใดบ้างและวิธีแก้ไขปัญหา

เมื่อสคริปต์ของคุณใช้งานไม่ได้ อย่าตกใจ! เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์คือเพื่อนที่ดีที่สุดของคุณ กด F12 (หรือคลิกขวาที่หน้าแล้วเลือก “ตรวจสอบ” ) และคลิกที่ “คอนโซล” แท็บ ข้อผิดพลาดส่วนใหญ่จะปรากฏที่นี่เป็นสีแดง

  • ข้อผิดพลาด:“ไม่สามารถอ่านคุณสมบัติของ null” หรือ “ไม่ได้ถูกกำหนดไว้”

    • ความหมาย :JavaScript ของคุณพยายามเข้าถึงองค์ประกอบ HTML ที่ยังไม่ได้โหลด
    • วิธีแก้ปัญหา :ซึ่งมักจะหมายถึง 811 ของคุณ แท็กอยู่ใน 824 หรือสูงเกินไปใน 838 . ย้ายสคริปต์ของคุณไปที่ด้านล่างของ 846 และเพิ่มแอตทริบิวต์ defer

  • ข้อผิดพลาด:“Uncaught SyntaxError”

    • ความหมาย :คุณพิมพ์รหัสผิด
    • วิธีแก้ปัญหา :โดยปกติคอนโซลจะให้หมายเลขบรรทัดแก่คุณ ดูที่บรรทัดนั้นอย่างใกล้ชิดเพื่อดูวงเล็บที่หายไป 858 , วงเล็บปีกกา 862 , เครื่องหมายคำพูด 871 หรือการพิมพ์ผิดอื่นๆ

  • ปัญหา:สคริปต์ไม่ทำงาน ไม่มีข้อผิดพลาดในคอนโซล

    • ความหมาย :ไฟล์ HTML ของคุณอาจไม่พบ 887 ของคุณ ไฟล์
    • วิธีแก้ปัญหา :ตรวจสอบ “เครือข่าย” แท็บในเครื่องมือสำหรับนักพัฒนา หากคุณเห็นไฟล์สคริปต์ของคุณแสดงข้อผิดพลาด 404 เส้นทางไฟล์ของคุณจะอยู่ใน 897 คุณลักษณะไม่ถูกต้อง ตรวจสอบการสะกดและโครงสร้างโฟลเดอร์ของคุณอีกครั้ง (เช่น 904 ).

  • ปัญหา:โค้ดทำงานแต่ไม่เป็นไปตามที่ฉันคาดหวัง

    • ความหมาย :นี่เป็นข้อผิดพลาดทางตรรกะ ไวยากรณ์ถูกต้อง แต่ขั้นตอนไม่ถูกต้อง

    • วิธีแก้ปัญหา :ใช้ 918 เพื่อแก้ไขข้อบกพร่อง ใส่ไว้ในโค้ดของคุณเพื่อพิมพ์ค่าของตัวแปรในระยะต่างๆ ซึ่งจะช่วยให้คุณติดตามตรรกะและดูว่ามีอะไรผิดปกติเกิดขึ้นที่ใด

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

คำถามที่พบบ่อย (FAQ)

1. วิธีที่ดีที่สุดในการเพิ่ม JavaScript ให้กับไฟล์ HTML ของฉันคืออะไร

วิธีที่ดีที่สุดคือการลิงก์ไปยัง 929 ภายนอก ไฟล์ที่มี 930 แอตทริบิวต์ โดยวางแท็กสคริปต์หน้าปิด 948 แท็ก (เช่น 954 ).

2. ฉันควรใส่ JavaScript ไว้ที่ส่วนหัวหรือส่วนเนื้อหา

คุณควรใส่ JavaScript 966 เกือบทุกครั้ง แท็กที่ส่วนท้ายสุดของ 976 ส่วนก่อนเครื่องหมายปิด 986 แท็ก.

วางสคริปต์ใน 997 บล็อกเพจไม่ให้แสดงผล ซึ่งหมายความว่าผู้ใช้ของคุณจะเห็นหน้าว่างสีขาวจนกว่าสคริปต์จะถูกดาวน์โหลดและดำเนินการอย่างสมบูรณ์ เมื่อคุณวางสคริปต์ไว้ที่ส่วนท้ายของ 1001 เบราว์เซอร์สามารถแสดงผล HTML และ CSS ทั้งหมดก่อน เพื่อให้ผู้ใช้เห็นเนื้อหาของคุณเร็วขึ้นมาก

3. ฉันสามารถเพิ่มแท็กสคริปต์หลายแท็กในไฟล์ HTML ไฟล์เดียวได้หรือไม่

ใช่ คุณสามารถรวม 1013 ได้มากเท่าที่ต้องการ แท็กตามที่คุณต้องการในไฟล์ HTML ไฟล์เดียว เบราว์เซอร์จะดาวน์โหลดและดำเนินการตามลำดับที่ปรากฏในเอกสาร

โดยทั่วไปจะใช้เพื่อโหลดไลบรารีของบุคคลที่สามก่อนสคริปต์ที่คุณกำหนดเองซึ่งขึ้นอยู่กับไลบรารีเหล่านี้

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

4. อะไรคือความแตกต่างที่สำคัญระหว่าง 1024 และ 1030 ?

แอตทริบิวต์ทั้งสองโหลดสคริปต์โดยไม่บล็อกเพจจากการแสดงผล ข้อแตกต่างที่สำคัญคือ 1042 รับประกันว่าสคริปต์จะดำเนินการตามลำดับที่ปรากฏหลังจากแยกวิเคราะห์เอกสารอย่างสมบูรณ์แล้ว ในขณะที่ 1052 รันสคริปต์ทันทีที่ดาวน์โหลด ซึ่งสามารถอยู่ในลำดับใดก็ได้

5. ฉันจะแก้ไขข้อบกพร่อง JavaScript ที่ไม่ทำงานได้อย่างไร

เปิดเบราว์เซอร์ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (F12) ให้ตรวจสอบคอนโซล เพื่อดูข้อความแสดงข้อผิดพลาด ให้ใช้ เครือข่าย เพื่อตรวจสอบการโหลดไฟล์ และเพิ่ม 1065 คำสั่งเพื่อติดตามค่าตัวแปร

บทสรุป

ในบทช่วยสอนนี้ คุณได้เรียนรู้วิธีการหลักสามวิธีในการเพิ่ม JavaScript ให้กับ HTML:แบบอินไลน์ใน 1076 , แบบอินไลน์ใน 1086 และเชื่อมโยงไปยัง 1095 ภายนอก ไฟล์. คุณยังได้สำรวจผลกระทบด้านประสิทธิภาพ เช่น การบล็อกการแสดงผล การแคชของเบราว์เซอร์ และ 1100 และ 1113 คุณลักษณะ พร้อมด้วยตัวอย่างจากการใช้งานจริงและคำแนะนำในการแก้ปัญหาโดยใช้แผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์

ตอนนี้คุณสามารถเลือกกลยุทธ์การโหลด JavaScript ที่เหมาะสมสำหรับกรณีการใช้งานของคุณ เขียนโค้ดที่สะอาดและบำรุงรักษาได้โดยใช้ไฟล์ภายนอก และแก้ไขข้อผิดพลาดทั่วไปโดยใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ การใช้ 1121 ภายนอก ไฟล์ที่มี 1138 คุณลักษณะเป็นแนวทางที่แนะนำสำหรับโครงการเว็บที่ใช้งานจริงส่วนใหญ่

หากต้องการสร้างทักษะ JavaScript ของคุณต่อไป โปรดสำรวจบทช่วยสอนต่อไปนี้:

  • วิธีใช้คอนโซลนักพัฒนา JavaScript
  • วิธีการเขียนความคิดเห็นใน JavaScript
  • ทำความเข้าใจไวยากรณ์และโครงสร้างโค้ดใน JavaScript
  • การทำความเข้าใจตัวแปร ขอบเขต และการยกใน JavaScript

การเรียนรู้การรวม JavaScript:แนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพ HTML งานนี้ได้รับอนุญาตภายใต้ Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License