Sử dụng thẻ script thế nào? Khi nào sử dụng thẻ Async và Defer?
Các bạn đang muốn tìm cú pháp, các thuộc tính của thẻ Script, sử dụng thẻ Async và Defer như thế nào? Thì bài viết này sẽ giúp bạn trả lời câu hỏi này.
Thẻ Script là gì?
Thẻ Script được sử dụng để chứa các câu lệnh Javascript.
Cú pháp:
<script src=""></script> <!--Gọi file Javascript từ tệp bên ngoài--> <script charset=""></script> <!--Khai báo ngôn ngữ sử dụng--> <script async=""></script> <!--Khai báo quá trình tải trang--> <script defer=""></script> <!--Khai báo quá trình tải trang-->
Các thuộc tính của thẻ Script
Thẻ script gồm 4 thuộc tính cơ bản: src, async, defer, charset. Sau đây chúng ta sẽ đi vào từng thuộc tính của thẻ script
Thuộc tính Src
Thông thường các câu lệnh Javascript được viết bên trong cặp thẻ <script></script>
Vẫn còn cách khách để viết các câu lệnh bên trong 1 tệp tin Javascript và sử dụng thuộc tính Src để nhúng tệp tin đấy vào trang web.
Ví dụ:
Đầu tiên: Tôi có 1 đoạn code script được lưu trong 1 tệp tin riêng có tên là isinhvien.js
var name = "Thử văn"; var year = 1997; var info = name + " sinh năm " + year; document.write(info);
Sau đó: Tôi dùng Src để gọi chúng vào file index.html của mình.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="isinhvien.js"></script>
</body>
</html>
Thuộc tính Async
Quá trình nhúng tệp tin HTML lên trang web cần 1 khoảng thời gian để upload lên, thông thường quá trình upload sẽ được diễn ra từ trên xuống dưới, nhưng với thuộc tính Async thì quá trình tải flie HTML gặp phải code Script thì quá trình này sẽ được diễn ra song song.
Sau khi tải đoạn code Script hoàn thành thì quá trình tải HTML mới tạm dừng để excute code script này. Sau đó quá trình tải HTML mới được tiếp tục.
Thuộc tính Defer
Quá trình nhúng tệp tin HTMLlên trang web gặp đoạn code Script thì quá trình upload sẽ không bị tạm dừng cho đến khi quá trình này được hoàn thành.
Quá trình nhúng HTML và script được diễn ra song song, và sẽ exucte script khi quá trình tải HTML được tải song.
Thuộc tính Charset
Thuộc tính này có chức năng khai báo loại ngôn ngữ được sử dụng trong tệp script.
Cú pháp: Charset=”UTF-8″ (ngôn ngữ sử dụng là tiếng việt)
Khi nào sử dụng thẻ Async và Defer?
Như ta thấy có 2 thuộc tính có chức năng tải trang web là Async và Defer thì sử dụng thuộc tính nào cho hợp lí?
- Nếu script của bạn là một module nào đó, chạy độc lập và không phụ thuộc vào bất kỳ script nào khác thì dùng thuộc tính async.
- Nếu script của bạn phụ thuộc vào một script khác hoặc được một script khác sử dụng lại (phụ thuộc vào) thì nên sử dụng thuộc tính defer.
- Nếu script của bạn nhỏ chỉ có vài dòng code thì xuất ngay các đoạn code vào bên trong thẻ script luôn (inline script), đừng tạo file JavaScript độc lập và không dùng 2 thuộc tính kia.
- Nếu script của bạn nhỏ như bên trên (ít code), và được một script khác sử dụng thuộc tính async phụ thuộc vào thì xuất script theo kiểu inline và đặt trước đoạn script async.
Trên đây là cách sử dụng của thẻ script và các thuộc tính thường được sử dụng khi sử dụng thẻ script. Vẫn còn rất nhiều thẻ được sử dụng trong file HTML các bạn tham khảo tại đây. Nhớ Like share để mọi người cùng biết nhé!
