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

Nguyễn Hoàng Minh viết ngày 27/05/2019

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à asyncdefer

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyễn Hoàng Minh

9 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
29 8
Đôi điều tâm sự Hmm đã bao giờ bạn bị nhờ là: "Mày ơi mấy hôm nữa câu lạc bộ làm cái ì ven, mày làm cái form nào đăng kí cái là chúng nó có vé/mail...
Nguyễn Hoàng Minh viết 1 năm trước
29 8
White
7 8
Set custom domain free cho Firebase hosting Như tiêu đề, em vừa tìm ra cách set được Domain của Freenom cho Firebase Hosting để đỡ phải vất vả nhậ...
Nguyễn Hoàng Minh viết hơn 1 năm trước
7 8
White
5 5
Một chút lời nói đầu Cảm ơn các bạn đã ủng hộ mình trong post (Link) Mình xin phép đừng dừng Series này vì mình hiện tại không có đủ khả năng để ...
Nguyễn Hoàng Minh viết 9 tháng trước
5 5
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 1 năm trước
0 4
White
2 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết 7 tháng trước
2 0
White
22 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 3 năm trước
22 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
9 bài viết.
26 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!