😅Page: DOMContentLoaded, load, beforeunload, unload phần 1 (ok)

https://javascript.info/onload-ondomcontentloaded

https://github.com/javascript-tutorial/en.javascript.info

Vòng đời của một trang HTML có ba sự kiện quan trọng:

  • DOMContentLoaded – trình duyệt đã tải HTML đầy đủ và cây DOM được tạo, nhưng các tài nguyên bên ngoài như ảnh và biểu định kiểu có thể chưa được tải.

  • load – không chỉ HTML được tải mà còn tất cả các tài nguyên bên ngoài: hình ảnh, kiểu, v.v.

  • beforeunload/unload – người dùng đang rời khỏi trang.

Each event may be useful:

  • DOMContentLoaded – DOM đã sẵn sàng, vì vậy trình xử lý có thể tra cứu các nút DOM, khởi tạo giao diện.

  • load – các tài nguyên bên ngoài được tải, vì vậy các kiểu được áp dụng, kích thước hình ảnh được biết, v.v.

  • beforeunload – người dùng sắp rời khỏi: chúng tôi có thể kiểm tra xem người dùng đã lưu các thay đổi hay chưa và hỏi xem họ có thực sự muốn rời đi hay không.

  • unload – người dùng gần như đã rời đi, nhưng chúng tôi vẫn có thể bắt đầu một số thao tác, chẳng hạn như gửi số liệu thống kê.

Hãy khám phá các chi tiết của những sự kiện này.

DOMContentLoaded

Sự kiện DOMContentLoaded xảy ra trên đối tượng tài liệu.

We must use addEventListener to catch it:

document.addEventListener("DOMContentLoaded", ready);
// not "document.onDOMContentLoaded = ..."

For instance:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
  function ready() {
    alert('DOM is ready');
    // image is not yet loaded (unless it was cached), so the size is 0x0
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  }
  document.addEventListener("DOMContentLoaded", ready);
  </script>
  <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
  </script>
</html>

Trong ví dụ này, trình xử lý DOMContentLoaded chạy khi tài liệu được tải, vì vậy trình xử lý này có thể thấy tất cả các thành phần, bao gồm bên dưới.

Nhưng nó không đợi tải hình ảnh. Vì vậy, cảnh báo hiển thị kích thước bằng không.

At first sight, the DOMContentLoaded event is very simple. The DOM tree is ready – here’s the event. There are few peculiarities though.

DOMContentLoaded and scripts

Khi trình duyệt xử lý tài liệu HTML và bắt gặp thẻ, nó cần thực thi trước khi tiếp tục xây dựng DOM. Đó là một biện pháp phòng ngừa, vì các tập lệnh có thể muốn sửa đổi DOM và thậm chí cả document.write vào đó, vì vậy DOMContentLoaded phải đợi.

Vì vậy, DOMContentLoaded chắc chắn xảy ra sau các tập lệnh như vậy:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM ready!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

<script>
  alert("Library loaded, inline script executed");
</script>

In the example above, we first see “Library loaded…”, and then “DOM ready!” (all scripts are executed).

Các tập lệnh không chặn DOMContentLoaded

Có hai trường hợp ngoại lệ từ quy tắc này:

  • Các tập lệnh có thuộc tính async, mà chúng ta sẽ đề cập sau, không chặn DOMContentLoaded.

  • Các tập lệnh được tạo động với document.createElement('script') và sau đó được thêm vào trang web cũng không chặn sự kiện này.

DOMContentLoaded and styles

Biểu định kiểubên ngoài không ảnh hưởng đến DOM, vì vậy DOMContentLoaded không đợi chúng.

Nhưng có một cạm bẫy. Nếu chúng ta có một tập lệnh sau kiểu, thì tập lệnh đó phải đợi cho đến khi biểu định kiểu tải:

Lý do cho điều này là tập lệnh có thể muốn lấy tọa độ và các thuộc tính phụ thuộc vào kiểu dáng khác của các phần tử, như trong ví dụ trên. Đương nhiên, nó phải đợi các kiểu tải.

Vì DOMContentLoaded chờ các tập lệnh, giờ đây nó cũng chờ các kiểu trước chúng.

Built-in browser autofill

Biểu mẫu tự động điền của Firefox, Chrome và Opera trên DOMContentLoaded.

Ví dụ: nếu trang có biểu mẫu có thông tin đăng nhập và mật khẩu và trình duyệt ghi nhớ các giá trị thì trên DOMContentLoaded, trình duyệt có thể thử tự động điền các giá trị đó (nếu được người dùng chấp thuận).

Vì vậy, nếu DOMContentLoaded bị hoãn bởi các tập lệnh tải lâu, thì tính năng tự động điền cũng sẽ chờ. Bạn có thể đã thấy điều đó trên một số trang web (nếu bạn sử dụng tính năng tự động điền của trình duyệt) – các trường đăng nhập/mật khẩu không được tự động điền ngay lập tức mà sẽ có độ trễ cho đến khi trang tải đầy đủ. Đó thực sự là độ trễ cho đến sự kiện DOMContentLoaded.

window.onload

The load event on the window object triggers when the whole page is loaded including styles, images and other resources. This event is available via the onload property.

Ví dụ bên dưới hiển thị chính xác kích thước hình ảnh, vì window.onload đợi tất cả hình ảnh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
  window.onload = function() { // can also use window.addEventListener('load', (event) => {
    alert('Page loaded');
    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
  </script>
  <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
  </script>
</html>

window.onunload

Khi khách truy cập rời khỏi trang, sự kiện dỡ tải sẽ kích hoạt trên cửa sổ. Chúng tôi có thể làm điều gì đó ở đó mà không liên quan đến độ trễ, chẳng hạn như đóng các cửa sổ bật lên có liên quan.

Ngoại lệ đáng chú ý là gửi phân tích.

Giả sử chúng tôi thu thập dữ liệu về cách trang được sử dụng: số lần nhấp chuột, số lần cuộn, khu vực trang đã xem, v.v.

Đương nhiên, sự kiện dỡ tải là khi người dùng rời khỏi chúng tôi và chúng tôi muốn lưu dữ liệu trên máy chủ của mình.

Tồn tại một phương thức navigator.sendBeacon(url, data) đặc biệt cho các nhu cầu như vậy, được mô tả trong thông số kỹ thuật https://w3c.github.io/beacon/.

window.onbeforeunload

Nếu khách truy cập bắt đầu điều hướng khỏi trang hoặc cố gắng đóng cửa sổ, trình xử lý beforeunload sẽ yêu cầu xác nhận bổ sung.

Nếu chúng tôi hủy sự kiện, trình duyệt có thể hỏi khách truy cập xem họ có chắc chắn không.

Bạn có thể thử bằng cách chạy mã này rồi tải lại trang:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script type="text/javascript">
  window.onbeforeunload = function() {
    return false;
  };
  </script>

</html>

Vì lý do lịch sử, việc trả lại chuỗi không trống cũng được tính là hủy sự kiện. Cách đây một thời gian, các trình duyệt thường hiển thị nó dưới dạng thông báo, nhưng như thông số kỹ thuật hiện đại cho biết, chúng không nên hiển thị.

Đây là một ví dụ:

window.onbeforeunload = function() {
  return "There are unsaved changes. Leave now?";
};

Hành vi đã được thay đổi vì một số quản trị viên web đã lạm dụng trình xử lý sự kiện này bằng cách hiển thị các thông báo gây hiểu lầm và gây phiền nhiễu. Vì vậy, hiện tại các trình duyệt cũ vẫn có thể hiển thị nó dưới dạng một thông báo, nhưng ngoài điều đó ra – không có cách nào để tùy chỉnh thông báo hiển thị cho người dùng.

event.preventDefault() không hoạt động từ trình xử lý beforeunload

Điều đó nghe có vẻ lạ, nhưng hầu hết các trình duyệt đều bỏ qua event.preventDefault().

Điều đó có nghĩa là đoạn mã sau có thể không hoạt động:

window.addEventListener("beforeunload", (event) => {
  // doesn't work, so this event handler doesn't do anything
  event.preventDefault();
});

Thay vào đó, trong các trình xử lý như vậy, người ta nên đặt event.returnValue thành một chuỗi để nhận được kết quả tương tự như mã ở trên:

window.addEventListener("beforeunload", (event) => {
  // works, same as returning from window.onbeforeunload
  event.returnValue = "There are unsaved changes. Leave now?";
});

readyState

Điều gì xảy ra nếu chúng ta đặt trình xử lý DOMContentLoaded sau khi tài liệu được tải?

Đương nhiên, nó không bao giờ chạy.

Có những trường hợp chúng tôi không chắc liệu tài liệu đã sẵn sàng hay chưa. Chúng tôi muốn chức năng của mình thực thi khi DOM được tải, ngay bây giờ hoặc sau này.

Thuộc tính document.readyState cho chúng ta biết về trạng thái tải hiện tại.

đây là 3 giá trị có thể:

  • "loading" – the document is loading.

  • "interactive" – tài liệu đã được đọc đầy đủ.

  • "complete" – tài liệu đã được đọc đầy đủ và tất cả tài nguyên (như hình ảnh) cũng được tải.

Vì vậy, chúng tôi có thể kiểm tra document.readyState và thiết lập trình xử lý hoặc thực thi mã ngay lập tức nếu nó sẵn sàng.

Like this:

function work() { /*...*/ }
if (document.readyState == 'loading') {
  // still loading, wait for the event
  document.addEventListener('DOMContentLoaded', work);
} else {
  // DOM is ready!
  work();
}

Ngoài ra còn có sự kiện readystatechange kích hoạt khi trạng thái thay đổi, vì vậy chúng ta có thể in tất cả các trạng thái này như sau:

// current state
console.log(document.readyState);
// print state changes
document.addEventListener('readystatechange', () => console.log(document.readyState));

Sự kiện readystatechange là một cơ chế thay thế để theo dõi trạng thái tải tài liệu, nó đã xuất hiện từ lâu. Ngày nay, nó hiếm khi được sử dụng.

Hãy xem toàn bộ dòng sự kiện để biết đầy đủ.

Đây là tài liệu có , và trình xử lý ghi nhật ký sự kiện:

index.html (file này khá nặng)

iframe.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  test iframe
</body>
</html>

The working example is in the sandbox.

The typical output:

  1. [1] initial readyState:loading

  2. [2] readyState:interactive

  3. [2] DOMContentLoaded

  4. [3] iframe onload

  5. [4] img onload

  6. [4] readyState:complete

  7. [4] window onload

Các số trong ngoặc vuông biểu thị thời gian gần đúng khi nó xảy ra. Các sự kiện được gắn nhãn với cùng một chữ số xảy ra gần như cùng một lúc (± vài mili giây).

  • document.readyState trở nên tương tác ngay trước DOMContentLoaded. Hai điều này thực sự có nghĩa giống nhau.

  • document.readyState trở nên hoàn chỉnh khi tất cả các tài nguyên (iframe và img) được tải. Ở đây chúng ta có thể thấy rằng nó xảy ra cùng lúc với img.onload (img là tài nguyên cuối cùng) và window.onload. Chuyển sang trạng thái hoàn tất có nghĩa giống như window.onload. Sự khác biệt là window.onload luôn hoạt động sau tất cả các trình xử lý tải khác.

Summary

Page load events:

  • Sự kiện DOMContentLoaded kích hoạt trên tài liệu khi DOM sẵn sàng. Chúng ta có thể áp dụng JavaScript cho các phần tử ở giai đoạn này.

  • Tập lệnh như ... hoặc chặn DOMContentLoaded, trình duyệt sẽ đợi chúng thực thi.

  • hình ảnh và các tài nguyên khác vẫn có thể tiếp tục tải.

  • Sự kiện tải trên cửa sổ kích hoạt khi trang và tất cả tài nguyên được tải. Chúng tôi hiếm khi sử dụng nó, bởi vì ở đó, thường không cần phải đợi quá lâu.

  • Sự kiện beforeunload trên cửa sổ kích hoạt khi người dùng muốn rời khỏi trang. Nếu chúng tôi hủy sự kiện, trình duyệt sẽ hỏi liệu người dùng có thực sự muốn rời đi hay không (ví dụ: chúng tôi có các thay đổi chưa được lưu).

  • Sự kiện dỡ tải trên cửa sổ kích hoạt khi người dùng cuối cùng rời đi, trong trình xử lý, chúng tôi chỉ có thể thực hiện những việc đơn giản không liên quan đến sự chậm trễ hoặc yêu cầu người dùng. Vì hạn chế đó, nó hiếm khi được sử dụng. Chúng tôi có thể gửi yêu cầu mạng với navigator.sendBeacon.

  • document.readyState là trạng thái hiện tại của tài liệu, các thay đổi có thể được theo dõi trong sự kiện readystatechange:

  • loading – tài liệu đang tải.

  • interactive – tài liệu được phân tích cú pháp, xảy ra cùng lúc với DOMContentLoaded, nhưng trước nó.

  • complete – tài liệu và tài nguyên được tải, xảy ra cùng lúc với window.onload, nhưng trước đó.

PreviousMerge objects with the same id but sum values of the objects (ok)NextScripts: async, defer phần 2(ok)

Last updated