Chiến lược tải, thực thi code JavaScript
Javascript
325
DOM
4
website
15
White

BeautyOnCode viết ngày 18/04/2022

Ba thành phần chính cấu tạo nên một trang web là HTML, CSSJavaScript.

HTML là ngôn ngữ đánh dấu giúp cấu trúc cho nội dung trang.

CSS là ngôn ngữ về các kiểu áp dụng vào nội dung HTML để làm đẹp cho trang

JavaScript(JS) là ngôn ngữ kịch bản cho phép tạo một trang web với nội dung cập nhật, hình ảnh động, …


Trong bài viết này, mình sẽ cùng bạn tìm hiểu về các cách thêm code JS vào trang web cùng các chiến lược tải, thực thi code JS.

Các cách thêm code JavaScript vào trang web

Để thêm code JS vào một trang web, có ba cách sau:

Internal JS

Internal JS có thể dịch nôm na là code JS được tải nội bộ, tức là đặt bên trong thẻ

<script>code here</script>

External JS với src

External JS sẽ ngược với Internal JS, code JS bây giờ không được đặt bên trong thẻ <script></script> nữa mà được đặt ở một nơi khác, và sẽ được tải thông qua đường dẫn được bỏ vào thuộc tính src của thẻ <script>

<script src=”script.js”></script>

Ví dụ bên trên thể hiện việc tải file script.js nằm cùng thư mục với file chứa code HTML. Đường dẫn này có thể là tuyệt đối hoặc tương đối.

(Bạn có thể đọc thêm về đường dẫn ở bài viết này.)

Inline JS

Inline JS là code JS được đặt luôn vào các thẻ HTML. Ví dụ:

<button onclick=”createParagraph()”> Click me!</button>

Lưu ý: cách này là BAD PRACTICE nên bạn xem cho biết chứ hạn chế dùng nhé. Lý do là vì không nên viết code JS chung với code HTML mà nên tách riêng là ngoài. Có thể sử dụng external JS và sử dụng event handler như dưới đây.

conts button = document.querySelectorAll("button");
for (const button of buttons) {
  button.addEventListener("click", createParagraph);
}

Dù là có nhiều cách để thêm code JS vào như thế, nhưng trong dự án thực tế bạn sẽ thường thấy JS được thêm vào với kiểu “External JS“, tức là code JS sẽ được viết ở file riêng, tải vào bằng src. Việc này sẽ giúp dự án dễ mở rộng và sửa lỗi.

Còn nếu bạn muốn kiểm tra nhanh một đoạn code JS nhỏ thì bạn có thể sử dụng các cách còn lại nếu thấy thuận tiện hơn.

Các chiến lược tải code JavaScript

Trước khi tìm hiểu liệu việc tải code JavaScript có thể nảy sinh vấn đề gì và cách giải quyết các vấn đề đó, thì việc đầu tiên là bạn cần biết qua cách một trang web được dựng lên như thế nào?

Trang web được dựng lên như thế nào?

Khi bạn gõ đường dẫn vào trình duyệt và nhấn enter, một yêu cầu được gửi đến máy chủ và file HTML được tải về.

Do đó, trình duyệt sẽ phân tích HTML đầu tiên, theo thứ tự từ trên xuống dưới. Trong file này chứa <link> để tải tiếp CSS<script> để tải tiếp tệp JavaScript.

Trong khi phân tích HTML, trình duyệt tạo cây DOM, tạo cấu trúc CSSOM với nội dung CSS đồng thời cũng biên dịch và thực thi JavaScript.

Quá trình này diễn ra đồng thời, trang web được vẽ lên màn hình và bạn thấy trang web được hiển thị.

Vấn đề thường gặp khi tải code JavaScript

Vậy là nội dung trang web trong file HTML được phân tích và dựng lên theo thứ tự từ trên xuống dưới.

Và nếu bạn sử dụng JavaScript để thay đổi một thành phần nào đó của trang(một DOM là thẻ <h2> nào đó chẳng hạn), thì code sẽ không thể chạy nếu code JavaScript được tải và thực thi trước khi HTML dựng cái DOM(thẻ h2) mà bạn cần thay đổi lên.

Giải quyết vấn đề

Để giải quyết vấn đề trên, có một số cách sau:

Dùng internal JS với DOMContentLoaded

*Giả sử bạn đang sử dụng internal JS, và đặt thẻ <script><header>. *

Để đảm bảo tất cả DOM được dựng lên trước khi code JS thực thi, bạn có thể bọc tất cả code JS vào một sự kiện(event) có tên là DOMContentLoaded.

Sự kiện này sẽ lắng nghe khi nào HTML được tải và dựng xong, thì khi đó mới thực thi code JS ở bên trong, do đó sẽ đảm bảo có đủ DOM để thực hiện code JS mà không gây lỗi.

<script>
  document.addEventListener('DOMContentLoaded', () => {
     const button = document.querySelectorAll("button");  
  }
</script>

Dùng external JavaScript với defer

Giả sử bạn đang sử dụng external JS, và đặt thẻ <script><header>.

Để đảm bảo tất cả DOM được dựng lên trước khi code JS thực thi, bạn có thể sử dụng một thuộc tính là defer

Thuộc tính defer sẽ giúp cho trình duyệt biết là sẽ tiếp tục tải và dựng HTML dù cho nó có đọc thấy thẻ <script>. Tức là quá trình dựng DOM sẽ không bị ngắt quãng, đồng thời code JS vẫn được tải về, nhưng chưa được thực thi. Code JS sẽ thực thi một khi quá trình dựng DOM hoàn thành.

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

Đặt code JavaScript load ngay trước thẻ </body>

Vì đã hiểu được lý do là DOM chưa dựng lên đủ để code JS thực thi mà không gây ra lỗi, nên có thể đảm bảo điều này bằng cách đặt <script> ngay trước thẻ </body>. Tức là code JS sẽ là code được tải và thực thi sau khi đã dựng xong DOM.

Tuy nhiên, cũng có một vài vấn đề cho giải pháp này là code JS sẽ load cuối cùng dẫn đến nếu code JS nặng thì sẽ tạo nên vấn đề lớn về hiệu suất tải trang, làm chậm trang web.

Cách này trước đây được sử dụng nhiều, khi mà chưa có async/defer ra đời. Tuy nhiên, nay thì nó đã khá lỗi thời nên ít được dùng đến vì hiệu quả không cao.


Vậy là chúng ta đã cùng đi qua những cách để thêm code JavaScript vào một trang web, cách một trang web được tải và dựng lên, cũng như các chiến lược tải và thực thi code JavaScript dựa trên vấn đề chính thường gặp.

Bài gốc của nội dung này nằm trên blog cá nhân của mình, mời bạn ghé chơi.

Hẹn gặp các bạn trong bài viết sau.

Nếu thích thì bạn có thể like/follow fanpage này, mình hay đăng bài viết mới cũng như cái nguồn hay hay trên đây.

Cám ơn các bạn đã ủng hộ mình.

BeautyOnCode.

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

BeautyOnCode

27 bài viết.
195 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 0
(Ảnh) Image by Lukas Bieri from Pixabay Chào mừng mọi người đến với bài post thứ hai của phần “Lượn lờ cùng Python” của series “(Link)”(Overview c...
BeautyOnCode viết gần 2 năm trước
3 0
White
2 2
(Ảnh) Hôm ni, mình học tiếp về bạn “Lỗi và ngoại lệ”, bài blog tiếp theo nằm trong series(Link), thuộc phần Python Tutorial nha. Ở bài này, mình...
BeautyOnCode viết hơn 1 năm trước
2 2
White
2 2
(Ảnh) Tuần này, mình cùng giải tiếp một bài leetcode về binary tree, (Link) Đề bài Given the root of a binary tree, return the inorder traversa...
BeautyOnCode viết 9 tháng trước
2 2
Bài viết liên quan
White
18 3
Trước đây vài ngày, tôi có chuyển hẳn website từ (Link) sử dụng Namecheap hosting sang (Link) sử dụng (Link) lưu trữ website trực tiếp trên Github....
Nguyễn Việt Anh viết gần 5 năm trước
18 3
White
9 0
Trước đây tôi có viết bài (Link), nói về những kinh nghiệm đầu tiên để setup một trang Jekyll. Bài này là phần tiếp theo, về: Sử dụng tên miền ri...
Nguyễn Việt Anh viết gần 5 năm trước
9 0
White
1 1
Gái như khởi tạo một website thật đơn giản đã đến hồi kết thúc, việc quan trọng trong Gái như khởi tạo một website thật đơn giản là giúp bạn biết đ...
tuds viết 6 năm trước
1 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
27 bài viết.
195 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á!