Tối ưu hóa Sự Kiện Trang Web với JavaScript

Chào mọi người, mình ngồi vọc theme hiện tại của mình, thì mình tìm ra một đoạn code khá hay mà được nhiều trang web chia sẽ đó là việc tối ưu giao diện và tối ưu tốc độ tải javascript khi trang chưa tải.

Trong phát triển web, việc quản lý sự kiện khi trang web đã được tải xong là một khía cạnh quan trọng để đảm bảo rằng mã JavaScript của bạn sẽ chạy đúng thời điểm.

Trong bài viết này, chúng ta sẽ khám phá hai phương pháp phổ biến để xử lý sự kiện này: sử dụng sự kiện $(document).ready() trong jQuery và sự kiện window.addEventListener('load') trong JavaScript thuần túy. Hãy cùng nhau tìm hiểu cách cả hai sự kiện này hoạt động, cũng như lựa chọn nào nên được sử dụng trong các tình huống khác nhau.

1. $(document).ready(function(){}):

Đây là một phần của thư viện jQuery. Đoạn mã này được thực thi khi DOM (Document Object Model) của trang web đã được tạo xong, nghĩa là các phần tử HTML đã được duyệt qua và có sẵn để sử dụng. Nó chạy luôn mà không đợi đến khi tất cả các tài nguyên (hình ảnh, stylesheet, v.v.) được tải xong.

$(document).ready(function() {
    // Mã JavaScript sẽ chạy luôn mà không cần chờ các thứ khác
});

Lưu ý: Đối với phiên bản mới của jQuery, bạn có thể viết ngắn gọn hơn bằng cách sử dụng $(function(){}).

2. window.addEventListener('load', function() {}):

Đoạn mã này sử dụng JavaScript thuần túy và sử dụng sự kiện load của đối tượng window. Nó sẽ chờ đến khi tất cả các tài nguyên của trang web (bao gồm cả hình ảnh, stylesheet, và script) được tải xong mới thực hiện.

Điều này có nghĩa là nếu trang web của bạn có nhiều hình ảnh hoặc tài nguyên khác cần thời gian để tải, bạn nên sử dụng sự kiện load để đảm bảo rằng mọi thứ đã sẵn sàng trước khi thực hiện mã.

window.addEventListener('load', function() {
    // Mã JavaScript sẽ phải chờ khi toàn bộ trang web đã tải xong thì mới chạy
});

Như vậy đã hoàn thành, chúc mọi người thành công.

Theo GiaoDien.Blog