Nắm vững việc tích hợp JavaScript:Các phương pháp hay nhất để đạt hiệu suất HTML

Giới thiệu

Bài viết này sẽ cung cấp cái nhìn tổng quan toàn diện về cách thêm JavaScript vào tệp HTML của bạn, nêu chi tiết ba phương pháp cốt lõi:đặt tập lệnh nội dòng trong <head> , nội tuyến trong <body> và liên kết với .js bên ngoài tập tin. Ngoài 'làm thế nào', bài viết này sẽ đi sâu vào câu hỏi 'tại sao' quan trọng, giải thích ý nghĩa quan trọng về hiệu suất của từng phương pháp, bao gồm các khái niệm như chặn hiển thị, bộ nhớ đệm của trình duyệt và việc sử dụng các thuộc tính hiện đại như trì hoãn và không đồng bộ.

Để kết nối lý thuyết và thực hành, hướng dẫn này bao gồm các ví dụ thực tế, thực tế như tạo chuyển đổi chế độ tối và xác thực biểu mẫu web. Cuối cùng, nó sẽ trang bị cho bạn các phương pháp hay nhất cần thiết để viết mã sạch, có thể bảo trì và hướng dẫn khắc phục sự cố nhằm giúp bạn giải quyết các lỗi phổ biến dành cho người mới bắt đầu sử dụng bảng điều khiển dành cho nhà phát triển của trình duyệt, nhằm đảm bảo bạn có thể tự tin bắt đầu các dự án phát triển web của mình.

Cần triển khai một dự án JavaScript một cách nhanh chóng? Hãy xem Nền tảng ứng dụng DigitalOcean và triển khai dự án JS trực tiếp từ GitHub trong vài phút.

Bài học chính

Cách tốt nhất để thêm JavaScript là sử dụng .js bên ngoài tập tin để tổ chức, bảo trì và tái sử dụng tốt hơn.
Đặt <script> các thẻ trong <head> là điều tồi tệ nhất đối với hiệu suất vì nó chặn hiển thị, buộc người dùng phải xem một trang trống.
Sử dụng defer thuộc tính trên các tập lệnh bên ngoài là phương pháp hiện đại được đề xuất để có hiệu suất tối ưu.
Các tệp JavaScript bên ngoài giúp tăng hiệu suất đáng kể thông qua bộ nhớ đệm của trình duyệt, điều mà các tập lệnh nội tuyến không làm được.
Một .js tệp có thể được liên kết trên nhiều trang, giúp việc cập nhật và bảo trì hiệu quả hơn nhiều.
Bảng điều khiển dành cho nhà phát triển (F12) là công cụ quan trọng nhất để khắc phục các lỗi JavaScript phổ biến.

Phương pháp 1:Cách thêm tập lệnh nội tuyến vào `<head>`

Bạn có thể thêm mã JavaScript vào tài liệu HTML bằng cách sử dụng thẻ HTML chuyên dụng <script> bao quanh mã JavaScript. <script> thẻ có thể được đặt trong <head> phần HTML của bạn hoặc trong <body> tùy thuộc vào thời điểm bạn muốn tải JavaScript.

Nói chung, mã JavaScript có thể đi vào bên trong tài liệu <head> để giữ nó nằm trong nội dung chính của tài liệu HTML của bạn.

Hãy xem xét tài liệu HTML cơ bản sau đây với tiêu đề trình duyệt là Today's Date :

chỉ mục.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>

Để thêm tập lệnh tạo cảnh báo, chúng ta có thể thêm <script> thẻ và mã JavaScript của chúng tôi bên dưới <title> thẻ, như hiển thị bên dưới:

chỉ mục.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>

Việc đặt tập lệnh ở đây sẽ báo hiệu cho trình duyệt phân tích cú pháp và thực thi JavaScript trước khi nó bắt đầu hiển thị nội dung trong <body> của trang.

Cách tiếp cận này phù hợp nhất với các tập lệnh không cần tương tác trực tiếp với các thành phần trên trang. Khi tập lệnh ở <head> chạy, trình duyệt vẫn chưa xây dựng Mô hình đối tượng tài liệu (DOM) cho <body> . Điều này có nghĩa là mọi thành phần HTML như tiêu đề, đoạn văn hoặc div đều chưa tồn tại. Kết quả là mã cố gắng tìm hoặc sửa đổi các phần tử này (ví dụ:sử dụng document.getElementById() ) sẽ thất bại. Do đó, phương pháp này lý tưởng để thiết lập các hàm và biến để sử dụng sau này hoặc để bao gồm các tập lệnh phân tích của bên thứ ba cần tải càng sớm càng tốt.

Sau khi tải trang, bạn sẽ nhận được thông báo tương tự như sau:

Nắm vững việc tích hợp JavaScript:Các phương pháp hay nhất để đạt hiệu suất HTML

Phương pháp 2:Cách thêm tập lệnh nội tuyến vào `<body>`

<script> thẻ cũng có thể được đặt trong <body> phần. Khi một tập lệnh được đặt ở đây, trình phân tích cú pháp HTML sẽ tạm dừng công việc của nó để thực thi tập lệnh tại điểm chính xác nơi nó xuất hiện trong tài liệu. Đây là phương pháp bắt buộc đối với bất kỳ mã JavaScript nào cần tìm và sửa đổi ngay một phần tử HTML.

Cách tốt nhất phổ biến là đặt tập lệnh ngay trước </body> đóng thẻ. Vị trí này đảm bảo rằng tất cả các phần tử HTML trên trang đã được phân tích cú pháp và có sẵn trong DOM trước khi tập lệnh bắt đầu chạy. Nó cũng cải thiện hiệu suất cảm nhận của trang, vì trình duyệt có thể hiển thị tất cả văn bản và hình ảnh hiển thị trước tiên, cho phép người dùng xem nội dung trang trước khi JavaScript có thể tốn thời gian được thực thi. Điều này cho phép nội dung hiển thị mà không bị chặn bởi việc thực thi JavaScript.

Hãy sử dụng phương pháp này để viết ngày trực tiếp vào phần nội dung HTML.

chỉ mục.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>

Đầu ra của tài liệu HTML ở trên được tải qua trình duyệt web sẽ trông giống như sau:

Nắm vững việc tích hợp JavaScript:Các phương pháp hay nhất để đạt hiệu suất HTML

Các tập lệnh nhỏ hoặc chỉ chạy trên một trang có thể hoạt động tốt trong tệp HTML, nhưng đối với các tập lệnh lớn hơn hoặc các tập lệnh sẽ được sử dụng trên nhiều trang thì đó không phải là giải pháp hiệu quả vì việc thêm nó vào có thể trở nên khó sử dụng hoặc khó đọc và hiểu. Trong phần tiếp theo, chúng ta sẽ tìm hiểu cách xử lý một tệp JavaScript riêng biệt trong tài liệu HTML của bạn.

Phương pháp 3:Cách làm việc với một tệp JavaScript riêng biệt

Đối với các tập lệnh hoặc mã lớn hơn cần được sử dụng trên nhiều trang, giải pháp chuyên nghiệp và hiệu quả nhất là đặt JavaScript vào một tệp riêng biệt có .js phần mở rộng. Sau đó, bạn có thể liên kết tới tệp bên ngoài này từ HTML của mình bằng cách sử dụng <script> gắn thẻ với src thuộc tính (nguồn).

Lợi ích của phương pháp này là rất đáng kể:

Tách biệt mối quan tâm :Nó giữ HTML của bạn để tạo cấu trúc, CSS để tạo kiểu và JavaScript để tương tác trong các tệp riêng biệt. Điều này làm cho dự án của bạn gọn gàng hơn, có tổ chức hơn và dễ gỡ lỗi hơn.
Khả năng tái sử dụng và bảo trì :Một tập lệnh duy nhất, như main-navigation.js , có thể được liên kết từ mọi trang trên trang web của bạn. Nếu cần cập nhật logic điều hướng, bạn chỉ phải chỉnh sửa một tệp đó.
Bộ nhớ đệm của trình duyệt :Khi người dùng truy cập trang web của bạn lần đầu tiên, trình duyệt của họ sẽ tải xuống tệp .js. Trong những lần truy cập tiếp theo hoặc khi điều hướng đến các trang khác sử dụng cùng một tệp, trình duyệt sẽ sử dụng bản sao được lưu trữ (được lưu trong bộ nhớ đệm) thay vì tải xuống lại. Điều này cải thiện đáng kể thời gian tải.

Để trình bày cách kết nối tài liệu JavaScript với tài liệu HTML, hãy tạo một dự án web nhỏ. Nó sẽ bao gồm script.js trong js/ thư mục, style.css trong css/ thư mục và một index.html chính trong thư mục gốc của dự án.

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

Hãy di chuyển mã JavaScript của chúng tôi để hiển thị ngày dưới dạng <h1> tiêu đề tới script.js tập tin:

script.js

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

Tiếp theo, hãy chỉnh sửa style.css tệp bằng cách thêm màu nền và kiểu vào <h1> tiêu đề:

style.css

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

Cuối cùng, chúng ta có thể tham chiếu cả tập lệnh và biểu định kiểu từ index.html của mình tập tin. Chúng tôi sử dụng <link> thẻ trong <head> cho CSS và <script> thẻ có src thuộc tính trong <body> cho JavaScript.

chỉ mục.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>

Giờ đây, với JavaScript và CSS, dự án của chúng tôi đã có tổ chức hơn nhiều. Khi chúng tôi tải index.html vào trình duyệt web, chúng ta sẽ thấy một trang được tạo kiểu với ngày hiện tại trông giống như sau:

Nắm vững việc tích hợp JavaScript:Các phương pháp hay nhất để đạt hiệu suất HTML

Bây giờ chúng ta đã đặt JavaScript vào một tệp, chúng ta có thể gọi nó theo cách tương tự từ các trang web bổ sung và cập nhật tất cả chúng ở một vị trí. Phương pháp này cung cấp cách có tổ chức và có thể mở rộng nhất để quản lý JavaScript trong các dự án web của bạn. Để kiểm soát nhiều hơn cách tải tập lệnh bên ngoài, bạn có thể xem xét sử dụng async và defer thuộc tính trên <script> thẻ.

Một số ví dụ thực tế là gì?

Hãy xem xét một số ví dụ thực tế dựa trên những gì chúng ta đã học được cho đến nay.

1. Chuyển đổi chế độ tối đơn giản

Hầu hết mọi trang web hoặc ứng dụng hiện đại đều cung cấp chế độ tối. Điều này có thể đạt được bằng cách chuyển đổi lớp CSS bằng 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>

CSS:

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

JavaScript:

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

Đầu tiên, JavaScript tìm thấy nút bằng ID của nó. Sau đó, nó đính kèm một trình xử lý sự kiện để chờ một cú nhấp chuột. Khi nhấp vào nút, classList.toggle('dark-mode') lệnh chạy. Nếu <body> phần tử không có .dark-mode lớp, JavaScript sẽ thêm nó. Nếu nó đã có nó rồi thì JavaScript sẽ xóa nó đi. Trình duyệt ngay lập tức áp dụng các kiểu CSS được liên kết với lớp đó.

2. Xác thực biểu mẫu cơ bản

Các trang web cần đảm bảo rằng người dùng điền vào biểu mẫu một cách chính xác trước khi chúng có thể được gửi. JavaScript có thể kiểm tra điều này ngay lập tức mà không cần tải lại trang.

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>

JavaScript:

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 = '';
 }
});

Tập lệnh lắng nghe submit sự kiện trên biểu mẫu. Khi bạn nhấp vào "Subscribe" nút, chức năng sẽ chạy. Trước tiên, nó sẽ kiểm tra xem văn bản bên trong email đầu vào có bao gồm @ hay không biểu tượng.

Nếu không, event.preventDefault() dừng hành vi gửi mặc định của biểu mẫu. Sau đó nó sẽ hiển thị một thông báo lỗi hữu ích cho người dùng.
Nếu đúng như vậy, tập lệnh sẽ không làm gì và biểu mẫu sẽ được gửi như bình thường.

Các yếu tố cần cân nhắc về hiệu suất của từng phương pháp là gì?

Hãy cùng thảo luận về những cân nhắc chính về hiệu suất cho từng phương pháp tải JavaScript đã thảo luận:

Tập lệnh nội tuyến trong `<head>`

Vấn đề chính: Chặn hiển thị

Đặt tập lệnh vào <head> có tác động tiêu cực đáng kể nhất đến hiệu suất. Trình duyệt phải tải xuống, phân tích cú pháp và thực thi JavaScript trước khi có thể tiếp tục hiển thị bất kỳ phần nào trong <body> của trang . Nếu tập lệnh của bạn lớn hoặc chạy chậm, người dùng sẽ nhìn chằm chằm vào một trang trắng trống cho đến khi tập lệnh kết thúc. Điều này làm tăng thời gian cho Sơn nội dung đầu tiên (FCP) , một thước đo quan trọng về trải nghiệm người dùng.
Bộ nhớ đệm: Không có

Các tập lệnh nội tuyến là một phần của tài liệu HTML. Chúng không thể được lưu trữ riêng biệt bởi trình duyệt. Mỗi khi người dùng truy cập trang, tập lệnh sẽ được tải xuống lại và phân tích cú pháp lại cùng với phần còn lại của HTML.

Phương pháp này nói chung là kém hiệu quả nhất và nên tránh trừ khi tập lệnh cực kỳ nhỏ và nhất thiết phải chạy trước bất kỳ thứ gì khác.

Tập lệnh nội tuyến trong `<body>`

Vấn đề chính: Chặn hiển thị một phần

Phương pháp này là một cải tiến lớn so với việc đặt tập lệnh vào <head> . Trình duyệt phân tích cú pháp và hiển thị HTML cho đến khi gặp <script> thẻ. Tại thời điểm đó, nó dừng hiển thị để thực thi tập lệnh. Bằng cách đặt tập lệnh ở cuối <body> (ngay trước </body> thẻ), bạn cho phép hiển thị toàn bộ trang hiển thị trước tiên.
Bộ nhớ đệm: Không có

Giống như các tập lệnh trong <head> , tập lệnh nội tuyến trong <body> là một phần của HTML và không thể được lưu vào bộ nhớ đệm độc lập.

Đặt đoạn mã ở cuối nội dung là một chiến lược tốt để cải thiện nhận thức về tốc độ vì nội dung sẽ hiển thị nhanh chóng. Tuy nhiên, nó vẫn có thể khiến trang không thể tương tác đầy đủ.

Tệp JavaScript bên ngoài

Phương pháp này mang lại sự linh hoạt nhất và hiệu suất tốt nhất, chủ yếu nhờ vào hai yếu tố:bộ nhớ đệm của trình duyệt và các thuộc tính tải đặc biệt.

Lợi thế chính: Bộ nhớ đệm và tải không đồng bộ
- Bộ nhớ đệm :Đây là chiến thắng hiệu suất lớn nhất. Một .js bên ngoài tập tin được tải xuống một lần trong lần truy cập đầu tiên. Đối với tất cả các trang tiếp theo sử dụng cùng một tập lệnh, trình duyệt sẽ tải tệp từ bộ đệm cục bộ, loại bỏ độ trễ mạng và tăng tốc trang web một cách đáng kể.
- defer và async Thuộc tính: Các tập lệnh bên ngoài mở khóa việc sử dụng hai thuộc tính mạnh mẽ.
  - <script defer src="..."></script> :Điều này yêu cầu trình duyệt tải xuống tập lệnh ở chế độ nền trong khi tiếp tục phân tích cú pháp HTML. Tập lệnh chỉ được thực thi sau khi toàn bộ tài liệu được phân tích cú pháp. Đây là phương pháp hiện đại được đề xuất vì nó không chặn và đảm bảo tập lệnh chạy theo thứ tự xuất hiện trong HTML.
  - <script async src="..."></script> :Thao tác này cũng tải xuống tập lệnh ở chế độ nền mà không chặn hiển thị. Tuy nhiên, nó sẽ thực thi tập lệnh ngay khi tải xuống xong, điều này có thể xảy ra bất kỳ lúc nào và có thể làm gián đoạn quá trình hiển thị. Nó phù hợp nhất với các tập lệnh độc lập của bên thứ ba (như quảng cáo hoặc phân tích) trong đó thứ tự thực thi không quan trọng.

Sử dụng tệp bên ngoài được liên kết với defer thuộc tính là cách thực hành tốt nhất để có hiệu suất tối ưu. Nó kết hợp các lợi ích của việc tải không chặn với bộ nhớ đệm của trình duyệt mạnh mẽ.

Một số phương pháp hay nhất là gì?

Dưới đây là một số phương pháp hay nhất và mẹo khắc phục sự cố cần thiết để làm việc với JavaScript trong tệp HTML của bạn.

Giữ JavaScript trong các tệp bên ngoài :Luôn ưu tiên liên kết đến .js tập tin (<script src="..."></script> ) thay vì viết JavaScript trực tiếp vào HTML của bạn. Điều này giúp mã của bạn luôn ngăn nắp, dễ bảo trì hơn và cho phép trình duyệt lưu tệp vào bộ nhớ đệm để tải nhanh hơn.
Tải tập lệnh ở cuối <body> với defer :Để có trải nghiệm người dùng tốt nhất, hãy đặt <script> của bạn các thẻ ngay trước thẻ đóng </body> gắn thẻ và thêm defer thuộc tính. Điều này đảm bảo nội dung trang của bạn tải và hiển thị nhanh chóng mà không bị chặn bởi JavaScript.
Viết mã có thể đọc được :Sử dụng tên mô tả rõ ràng cho các biến và hàm của bạn (ví dụ:calculateTotalPrice thay vì calc ). Sử dụng nhận xét // để giải thích lý do tại sao bạn viết một đoạn mã chứ không phải mục đích của nó.
Đừng lặp lại chính mình (DRY) :Nếu bạn thấy mình viết cùng một dòng mã ở nhiều nơi, hãy gói mã đó vào một hàm. Sau đó, bạn có thể gọi hàm đó bất cứ khi nào bạn cần, giúp mã của bạn ngắn hơn và dễ cập nhật hơn.

Một số vấn đề thường gặp là gì và cách khắc phục chúng?

Khi tập lệnh của bạn không hoạt động, đừng hoảng sợ! Công cụ dành cho nhà phát triển của trình duyệt là người bạn tốt nhất của bạn. Nhấn F12 (hoặc nhấp chuột phải vào trang và chọn “Kiểm tra” ) và nhấp vào “Bảng điều khiển” tab. Hầu hết các lỗi sẽ xuất hiện ở đây với màu đỏ.

Lỗi:“Không thể đọc thuộc tính null” hoặc “không được xác định”
- Ý nghĩa :JavaScript của bạn đã cố truy cập vào phần tử HTML chưa được tải.
- Giải pháp :Điều này hầu như luôn có nghĩa là <script> của bạn thẻ nằm trong <head> hoặc quá cao trong <body> . Di chuyển tập lệnh của bạn xuống cuối <body> và thêm thuộc tính trì hoãn.
Lỗi:“Lỗi cú pháp chưa được bắt”
- Ý nghĩa :Mã của bạn có lỗi đánh máy.
- Giải pháp :Bảng điều khiển thường cung cấp cho bạn số dòng. Hãy nhìn kỹ vào dòng đó để tìm dấu ngoặc đơn bị thiếu () , dấu ngoặc nhọn {} , trích dẫn "" , hoặc các lỗi chính tả khác.
Vấn đề:Tập lệnh không chạy, không có lỗi trong Console.
- Ý nghĩa :Tệp HTML của bạn có thể không tìm thấy .js của bạn tập tin.
- Giải pháp :Kiểm tra “Mạng” tab trong Công cụ dành cho nhà phát triển. Nếu bạn thấy tệp tập lệnh của mình được liệt kê có lỗi 404 thì đường dẫn tệp của bạn trong src thuộc tính không chính xác. Kiểm tra kỹ chính tả và cấu trúc thư mục của bạn (ví dụ:<script src="js/script.js"></script> ).
Vấn đề:Mã chạy nhưng không hoạt động như tôi mong đợi.
- Ý nghĩa :Đây là một lỗi logic. Cú pháp đúng nhưng các bước lại sai.
- Giải pháp :Sử dụng console.log() để gỡ lỗi. Đặt nó vào mã của bạn để in giá trị của các biến ở các giai đoạn khác nhau. Điều này giúp bạn theo dõi logic và biết chính xác nó sai ở đâu.
```
let userRole = 'guest';
console.log('User role before check:', userRole); // See what the value is
if (userIsAdmin) {
 userRole = 'admin';
}
```

Câu hỏi thường gặp (FAQ)

1. Cách tốt nhất để thêm JavaScript vào tệp HTML của tôi là gì?

Cách tốt nhất là liên kết với .js bên ngoài tập tin có defer thuộc tính, đặt thẻ script ngay trước thẻ </body> đóng thẻ (ví dụ:<script src="path/to/script.js" defer></script> ).

2. Tôi nên đặt JavaScript vào phần đầu hay phần thân?

Bạn hầu như luôn phải đặt <script> JavaScript của mình các thẻ ở cuối <body> ngay trước phần </body> đóng thẻ.

Đặt tập lệnh vào <head> chặn trang hiển thị, nghĩa là người dùng của bạn sẽ thấy một trang trắng trống cho đến khi các tập lệnh được tải xuống và thực thi đầy đủ. Khi bạn đặt tập lệnh ở cuối <body> , trước tiên trình duyệt có thể hiển thị toàn bộ HTML và CSS để người dùng xem nội dung của bạn nhanh hơn nhiều.

3. Tôi có thể thêm nhiều thẻ script vào một tệp HTML không?

Có, bạn có thể bao gồm bao nhiêu <script> các thẻ bạn cần trong một tệp HTML. Trình duyệt sẽ tải xuống và thực thi chúng theo thứ tự xuất hiện trong tài liệu.

Điều này thường được sử dụng để tải thư viện của bên thứ ba trước các tập lệnh tùy chỉnh phụ thuộc vào chúng.

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

4. Điểm khác biệt chính giữa `async` là gì và `defer` ?

Cả hai thuộc tính đều tải tập lệnh mà không chặn trang hiển thị. Điểm khác biệt chính là defer đảm bảo các tập lệnh sẽ thực thi theo thứ tự xuất hiện sau khi tài liệu được phân tích cú pháp đầy đủ, trong khi async thực thi tập lệnh ngay khi được tải xuống, có thể theo bất kỳ thứ tự nào.

5. Làm cách nào để gỡ lỗi JavaScript không hoạt động?

Mở trình duyệt Công cụ dành cho nhà phát triển (F12), hãy kiểm tra Bảng điều khiển tab dành cho thông báo lỗi, hãy sử dụng Mạng tab để xác minh việc tải tệp và thêm console.log() câu lệnh để theo dõi các giá trị biến.

Kết luận

Trong hướng dẫn này, bạn đã tìm hiểu ba phương pháp cốt lõi để thêm JavaScript vào HTML:nội tuyến trong <head> , nội tuyến trong <body> và liên kết với .js bên ngoài tập tin. Bạn cũng đã khám phá những tác động về hiệu suất bao gồm chặn hiển thị, bộ nhớ đệm của trình duyệt và defer và async thuộc tính, cùng với các ví dụ thực tế và hướng dẫn khắc phục sự cố bằng Developer Console.

Giờ đây, bạn có thể chọn chiến lược tải JavaScript phù hợp cho trường hợp sử dụng của mình, viết mã sạch và có thể bảo trì bằng các tệp bên ngoài cũng như gỡ lỗi các lỗi phổ biến bằng Công cụ dành cho nhà phát triển của trình duyệt. Sử dụng .js bên ngoài tập tin có defer thuộc tính là cách tiếp cận được đề xuất cho hầu hết các dự án web sản xuất.

Để tiếp tục xây dựng kỹ năng JavaScript của bạn, hãy khám phá các hướng dẫn sau:

Cách sử dụng Bảng điều khiển dành cho nhà phát triển JavaScript
Cách viết bình luận bằng JavaScript
Tìm hiểu cú pháp và cấu trúc mã trong JavaScript
Tìm hiểu các biến, phạm vi và nâng cao trong JavaScript

Nắm vững việc tích hợp JavaScript:Các phương pháp hay nhất để đạt hiệu suất HTML Tác phẩm này được cấp phép theo Giấy phép quốc tế Creative Commons Ghi công-NonCommercial-ShareAlike 4.0.

Nắm vững việc tích hợp JavaScript:Các phương pháp hay nhất để đạt hiệu suất HTML

Giới thiệu

Bài học chính

Phương pháp 1:Cách thêm tập lệnh nội tuyến vào <head>

Phương pháp 2:Cách thêm tập lệnh nội tuyến vào <body>

Phương pháp 3:Cách làm việc với một tệp JavaScript riêng biệt

Một số ví dụ thực tế là gì?

1. Chuyển đổi chế độ tối đơn giản

2. Xác thực biểu mẫu cơ bản

Các yếu tố cần cân nhắc về hiệu suất của từng phương pháp là gì?

Tập lệnh nội tuyến trong <head>

Tập lệnh nội tuyến trong <body>

Tệp JavaScript bên ngoài

Một số phương pháp hay nhất là gì?

Một số vấn đề thường gặp là gì và cách khắc phục chúng?

Câu hỏi thường gặp (FAQ)

1. Cách tốt nhất để thêm JavaScript vào tệp HTML của tôi là gì?

2. Tôi nên đặt JavaScript vào phần đầu hay phần thân?

3. Tôi có thể thêm nhiều thẻ script vào một tệp HTML không?

4. Điểm khác biệt chính giữa async là gì và defer ?

5. Làm cách nào để gỡ lỗi JavaScript không hoạt động?

Kết luận

Phương pháp 1:Cách thêm tập lệnh nội tuyến vào `<head>`

Phương pháp 2:Cách thêm tập lệnh nội tuyến vào `<body>`

Tập lệnh nội tuyến trong `<head>`

Tập lệnh nội tuyến trong `<body>`

4. Điểm khác biệt chính giữa `async` là gì và `defer` ?