Liệu bạn đã sử dụng thành thạo thẻ <script> trong html

Bài đăng này đã không được cập nhật trong 3 năm

Giới thiệu về thẻ `<script>`

Như chúng ta đã biết một website hiện nay không thể thiếu 3 thành phần là HTML, CSS và Javascript. Chúng ta thường import file javascript bằng thẻ <script> với cách sử dụng như sau

<script src="index.js"><script/>

Ô vậy thì thẻ script chỉ có 1 attribute đơn thuần là src thôi ư? Chúng ta hãy cùng nhau tìm hiểu trong bài viết này nhé

Cách thẻ `<script>` hoạt động

Chúng ta sẽ cùng quy ước như sau

Màu xanh lá cây sẽ là lúc trình duyệt dịch mã html
Màu xám là quá trình dịch html bị ngưng lại
Màu tím là tải script js từ nguồn
Màu đỏ là thực hiện js

Nếu ta sử dụng <script> với cách sử dụng trên

<script src="index.js"></script>

ta sẽ có sơ đồ quá trình như sau Với 1 thẻ <script> không có thuộc tính gì thì khi dịch html đến đoạn gặp phải thẻ <script> thì quá trình dịch html tạm thời bị ngưng lại và bắt đầu load js về, chạy script js hoàn tất mới tiếp tục chạy đoạn code dưới

Ví dụ như sau

//index.js
var btn = document.createElement("BUTTON");   // Create a <button> element
btn.innerHTML = "CLICK ME";                   // Insert text
document.body.appendChild(btn);               // Append <button> to <body>

Nếu ta dùng đơn thuần <script> thì sẽ có kết quả như sau

Vậy thì tại sao phải quan tâm đến các thuộc tính của thẻ js? Bài toán đặt ra là ví dụ bạn cần tương tác DOM với <div>B</div> chẳng hạn mà thẻ js được load trước vậy thì làm gì có thẻ đó để tương tác dom. Nếu sử dụng thẻ <script> đơn thuần gây ra 1 hiện tượng gọi là Blocking khiến web phải chờ đoạn script thực hiện mới có thể xem được nội dung

Giới thiệu các thuộc tính của thẻ `<script>`

Theo mình tìm hiểu thì thẻ <script> sẽ có 2 thuộc tính là async và defer

Thẻ `<script async>`

Trước hết hãy cùng nhìn vào sơ đồ quá trình thẻ này hoạt động Đối với thẻ script có thuộc tính async, trong quá trình trình duyệt dịch html gặp thẻ này thì nó vẫn sẽ tiếp tục dịch html cho đến khi script được tải thành công về, lúc này trình duyệt sẽ tạm ngừng để chạy script. Quá trình chạy script kết thúc trình duyệt tiếp tục dịch đoạn html bên dưới. Điều này sẽ giúp bạn có thể giúp bạn tiết kiệm được thời gian vì quá trình blocking giảm xuống chỉ còn là lúc chạy script thay vì cả tải script như trên

Thẻ `<script defer>`

Với thẻ script có thuộc tính defer, quá trình dịch html sẽ không bị dừng lại mà sẽ tiếp tục dịch cho đến khi hoàn thành, quá trình download các script file được tiến hành song song, và cuối cùng thì sẽ thực hiện những script code này khi html đã dịch xong.

Vậy khi nào nên sử dụng thuộc tính

Có một số nguyên tắc như sau

Nếu script là độc lập, không phụ thuộc vào các script khác thì nên sử dụng async cho load và thực thi với trang luôn
Nếu script bị phụ thuộc vào các script khác thì dùng defer để load và thực thi theo thứ tự
Nếu script nhỏ, các script các phụ thuộc vào nó thì chỉ cần inline, không cần thuộc tính

Lợi ích

Với những thuộc tính script có thể giúp bạn cải thiện tới 40% tốc độ load web và mang lại trải nghiệm tốt hơn với người sử dụng đấy

Giới thiệu về thẻ <script>

Cách thẻ <script> hoạt động

Giới thiệu các thuộc tính của thẻ <script>

Thẻ <script async>

Thẻ <script defer>