Ngừng sử dụng sự kiện huỷ tải

Sự kiện unload sẽ dần bị ngừng sử dụng bằng cách dần thay đổi chế độ mặc định để trình xử lý unload ngừng kích hoạt trên các trang, trừ phi một trang chọn bật lại một cách rõ ràng.

Tiến trình ngừng sử dụng

Chúng tôi đã lưu ý rằng hành vi giải phóng có thể sẽ thay đổi sớm nhất từ tháng 1 năm 2019, khi chúng tôi thông báo ý định triển khai bộ nhớ đệm cho thao tác tiến/lùi. Song song với việc triển khai, chúng tôi đã tiến hành một chiến dịch tiếp cận rộng rãi, nhờ đó mức sử dụng tính năng tải xuống đã giảm đáng kể. Để bổ sung cho hoạt động tiếp cận này, chúng tôi cũng bắt đầu cung cấp các cách kiểm thử hiệu quả của việc ngừng sử dụng tính năng tải xuống từ Chrome 115:

Sau các giai đoạn tiếp cận và thử nghiệm này, chúng tôi dự kiến sẽ triển khai quy trình ngừng sử dụng một cách linh hoạt như sau:

  • Một giai đoạn có giới hạn trong đó tính năng huỷ tải sẽ dần ngừng hoạt động đối với 50 trang web phổ biến nhất (thông tin tham khảo tại thời điểm viết bài).
    • Bắt đầu với 1% người dùng từ Chrome 120 (cuối tháng 11 năm 2023).
    • Áp dụng cho 100% người dùng vào cuối quý 3 năm 2024
  • Ngoài ra, kể từ quý 3 năm 2024, chúng tôi dự định bắt đầu một giai đoạn chung trong đó tính năng tải xuống sẽ dần ngừng hoạt động trên mọi trang web, bắt đầu từ 1% người dùng và kết thúc bằng 100% người dùng vào cuối quý 1 năm 2025.

Xin lưu ý rằng chúng tôi cũng cung cấp trình đơn các lựa chọn chọn không sử dụng trong trường hợp tiến trình ngừng sử dụng một cách linh hoạt này không cung cấp đủ thời gian để di chuyển khỏi tính năng tải xuống. Mục tiêu của chúng tôi là sử dụng phương thức ngừng sử dụng một cách linh hoạt này để thông báo tiến trình cho giai đoạn cuối cùng (ngừng sử dụng hoàn toàn tính năng tải xuống) trong đó các lựa chọn không sử dụng này sẽ bị xoá hoặc giảm.

Tiến trình ngừng sử dụng tính năng giải phóng.

Thông tin khái quát

unload được thiết kế để kích hoạt khi tài liệu đang được giải phóng. Về lý thuyết, bạn có thể dùng phương thức này để chạy mã bất cứ khi nào người dùng rời khỏi một trang hoặc dưới dạng lệnh gọi lại khi kết thúc phiên.

Sau đây là một số trường hợp thường dùng sự kiện này:

  • Lưu dữ liệu người dùng: Lưu dữ liệu trước khi rời khỏi trang.
  • Thực hiện các tác vụ dọn dẹp: Đóng các tài nguyên đang mở trước khi rời khỏi trang.
  • Gửi dữ liệu phân tích: Gửi dữ liệu liên quan đến lượt tương tác của người dùng khi phiên kết thúc.

Tuy nhiên, sự kiện unload rất không đáng tin cậy.

Trên Chrome và Firefox dành cho máy tính, unload khá đáng tin cậy nhưng ảnh hưởng tiêu cực đến hiệu suất của trang web bằng cách ngăn việc sử dụng bfcache (bộ nhớ đệm cho thao tác tiến/lùi).

Trên trình duyệt di động, unload thường không chạy vì các thẻ thường chạy ở chế độ nền rồi bị tắt. Vì lý do này, trình duyệt chọn ưu tiên bfcache trên thiết bị di động hơn unload, khiến chúng trở nên không đáng tin cậy hơn nữa. Safari cũng sử dụng hành vi này trên máy tính.

Nhóm Chrome cho rằng việc sử dụng mô hình ưu tiên bfcache trên thiết bị di động so với unload trên máy tính sẽ gây gián đoạn bằng cách khiến mô hình này trở nên không đáng tin cậy hơn trên máy tính, trong khi trước đây mô hình này đã khá đáng tin cậy trong Chrome (và Firefox). Thay vào đó, mục tiêu của Chrome là xoá hoàn toàn sự kiện unload. Cho đến thời điểm đó, tính năng này vẫn sẽ hoạt động ổn định trên máy tính cho những người đã chọn không sử dụng tính năng này.

Tại sao không dùng sự kiện unload nữa?

Việc ngừng sử dụng unload là một bước quan trọng trong việc nhận diện rộng rãi hơn về web mà chúng ta đang sử dụng. Sự kiện unload tạo ra cảm giác sai lầm về việc kiểm soát vòng đời của ứng dụng, điều này ngày càng không đúng với cách chúng ta duyệt web trong thế giới điện toán hiện đại.

Các hệ điều hành di động thường xuyên đóng băng hoặc huỷ tải trang web để tiết kiệm bộ nhớ và trình duyệt dành cho máy tính cũng đang làm điều này ngày càng nhiều vì cùng lý do. Ngay cả khi không có sự can thiệp của hệ điều hành, người dùng thường xuyên chuyển đổi và đóng các thẻ cũ mà không "rời khỏi trang" theo cách chính thức.

Việc xoá sự kiện unload vì đã lỗi thời là một sự công nhận rằng chúng ta, với tư cách là nhà phát triển web, cần đảm bảo mô hình của mình phù hợp với mô hình của thế giới thực và không phụ thuộc vào các khái niệm lỗi thời không còn đúng nữa (nếu có).

Các giải pháp thay thế cho sự kiện unload

Thay vì unload, bạn nên sử dụng:

  • visibilitychange: Để xác định thời điểm chế độ hiển thị của một trang thay đổi. Sự kiện này xảy ra khi người dùng chuyển đổi thẻ, thu nhỏ cửa sổ trình duyệt hoặc mở một trang mới. Hãy coi trạng thái hidden là thời điểm đáng tin cậy gần đây nhất để lưu ứng dụng và dữ liệu người dùng.
  • pagehide: Để xác định thời điểm người dùng rời khỏi trang. Sự kiện này xảy ra khi người dùng rời khỏi trang, tải lại trang hoặc đóng cửa sổ trình duyệt. Sự kiện pagehide không được kích hoạt khi trang chỉ được thu nhỏ hoặc chuyển sang một thẻ khác. Xin lưu ý rằng vì pagehide không khiến trang không đủ điều kiện sử dụng bộ nhớ đệm cho thao tác tiến/lùi, nên có thể khôi phục trang sau khi sự kiện này kích hoạt. Nếu bạn đang dọn dẹp bất kỳ tài nguyên nào trong sự kiện này, thì bạn có thể phải khôi phục các tài nguyên đó khi khôi phục trang.

Sự kiện beforeunload có trường hợp sử dụng hơi khác so với unload vì đây là một sự kiện có thể huỷ. Lớp này thường được dùng để cảnh báo người dùng về các thay đổi chưa lưu khi rời khỏi trang. Sự kiện này cũng không đáng tin cậy vì sẽ không kích hoạt nếu một thẻ nền bị tắt. Bạn nên hạn chế sử dụng beforeunloadchỉ thêm thuộc tính này theo điều kiện. Thay vào đó, hãy sử dụng các sự kiện ở trên cho hầu hết các lần thay thế unload.

Để biết thêm thông tin chi tiết, hãy xem lời khuyên về việc không bao giờ sử dụng trình xử lý unload.

Phát hiện mức sử dụng unload

Có nhiều công cụ để giúp bạn tìm thấy sự xuất hiện của sự kiện unload trên các trang. Điều này cho phép các trang web khám phá xem liệu họ có đang sử dụng sự kiện này hay không (trong mã của riêng họ hoặc thông qua các thư viện) và do đó có thể bị ảnh hưởng bởi việc ngừng sử dụng sắp tới.

Công cụ của Chrome cho nhà phát triển

Công cụ của Chrome cho nhà phát triển có một tính năng kiểm tra back-forward-cache để giúp bạn xác định các vấn đề có thể khiến trang của bạn không đủ điều kiện sử dụng bộ nhớ đệm cho thao tác tiến/lùi, bao gồm cả việc sử dụng trình xử lý unload.

Để kiểm tra bộ nhớ đệm cho thao tác tiến/lùi, hãy làm theo các bước sau:

  1. Trên trang của bạn, hãy mở DevTools, sau đó chuyển đến Application (Ứng dụng) > Background services (Dịch vụ nền) > Back/forward cache (Bộ nhớ đệm lui/tiến).

  2. Nhấp vào Kiểm thử bộ nhớ đệm cho thao tác tiến/lùi. Chrome sẽ tự động chuyển bạn đến chrome://terms/ rồi quay lại trang của bạn. Ngoài ra, bạn có thể nhấp vào nút quay lại và nút chuyển tiếp của trình duyệt.

Nếu trang của bạn không đủ điều kiện để lưu vào bộ nhớ đệm cho thao tác tiến/lùi, thì thẻ Bộ nhớ đệm cho thao tác tiến/lùi sẽ hiển thị danh sách các vấn đề. Trong phần Có thể thao tác, bạn có thể xem liệu mình có đang sử dụng unload hay không:

Công cụ kiểm tra bộ nhớ đệm cho thao tác tiến/lùi trong Công cụ của Chrome cho nhà phát triển cho thấy đã sử dụng trình xử lý giải phóng

API báo cáo

Bạn có thể sử dụng API Báo cáo cùng với Chính sách quyền chỉ có thể đọc để phát hiện việc người dùng trang web sử dụng unload.

Để biết thêm thông tin chi tiết, hãy xem bài viết Sử dụng API Báo cáo để tìm lượt tải xuống

API notRestoredReasons Bfcache

Thuộc tính notRestoredReasons – được thêm vào lớp PerformanceNavigationTiming – báo cáo thông tin về việc tài liệu có bị chặn sử dụng bfcache khi điều hướng hay không và lý do. Bạn có thể xem hướng dẫn sử dụng tại đây. Dưới đây là ví dụ về cảnh báo đối tượng phản hồi của trình nghe unload hiện có:

{
   children: [],
   id: null,
   name: null,
   reasons: [
     {"reason", "unload-handler"}
   ],
   src: null,
   url: "https://www.example.com/page/"
}

Kiểm soát quyền truy cập vào unload

Chrome sẽ dần ngừng sử dụng sự kiện unload. Trong thời gian chờ đợi, bạn có thể sử dụng nhiều công cụ để kiểm soát hành vi này và chuẩn bị cho việc ngừng sử dụng sắp tới. Xin lưu ý rằng bạn không nên dựa vào các kỹ thuật này về lâu dài và bạn nên lên kế hoạch di chuyển sang các giải pháp thay thế càng sớm càng tốt.

Các tuỳ chọn sau đây cho phép bạn bật hoặc tắt trình xử lý unload để kiểm tra cách hoạt động của trang web mà không cần trình xử lý đó, nhờ đó, bạn có thể chuẩn bị cho việc ngừng sử dụng sắp tới. Có nhiều loại chính sách:

  • Chính sách về quyền: Đây là API nền tảng để chủ sở hữu trang web kiểm soát quyền truy cập vào các tính năng, ở cấp trang web hoặc cấp trang riêng lẻ, thông qua việc sử dụng tiêu đề HTTP.
  • Chính sách dành cho doanh nghiệp: Các công cụ để quản trị viên CNTT định cấu hình Chrome cho tổ chức hoặc doanh nghiệp của họ. Bạn có thể định cấu hình các chế độ này thông qua một bảng điều khiển dành cho quản trị viên, chẳng hạn như Bảng điều khiển dành cho quản trị viên của Google.
  • Cờ Chrome: Cờ này cho phép nhà phát triển cá nhân thay đổi chế độ cài đặt ngừng sử dụng unload để kiểm thử mức tác động trên nhiều trang web.

Chính sách về quyền

Chính sách quyền đã được thêm vào Chrome 115 để cho phép các trang web chọn không sử dụng trình xử lý unload và hưởng lợi ngay lập tức từ bfcache để cải thiện hiệu suất trang web. Hãy xem các ví dụ sau về cách thiết lập thuộc tính này cho trang web của bạn. Điều này cho phép các trang web chuẩn bị trước khi ngừng sử dụng unload.

Tính năng này sẽ được mở rộng trong Chrome 117 để cho phép các trang web thực hiện thao tác ngược lại và chọn tiếp tục cố gắng kích hoạt trình xử lý unload, vì Chrome sẽ thay đổi chế độ mặc định để các trình xử lý này không kích hoạt trong tương lai. Hãy xem các ví dụ sau về cách tiếp tục cho phép trình xử lý giải phóng tải kích hoạt cho trang web của bạn. Lựa chọn sử dụng này sẽ không tồn tại mãi mãi và bạn nên sử dụng để cho phép các trang web có thời gian di chuyển khỏi trình xử lý unload.

Chính sách dành cho doanh nghiệp

Các doanh nghiệp có phần mềm phụ thuộc vào sự kiện unload để hoạt động chính xác có thể sử dụng chính sách ForcePermissionPolicyUnloadDefaultEnabled để ngăn chặn việc loại bỏ dần đối với các thiết bị thuộc quyền kiểm soát của họ. Khi bạn bật chính sách này, unload sẽ tiếp tục được bật theo mặc định cho tất cả các nguồn gốc. Một trang vẫn có thể đặt chính sách nghiêm ngặt hơn nếu muốn. Giống như tính năng chọn không áp dụng Chính sách quyền, đây là một công cụ giúp giảm thiểu các thay đổi có thể gây lỗi, nhưng bạn không nên sử dụng công cụ này vô thời hạn.

Cờ Chrome và nút chuyển dòng lệnh

Ngoài chính sách dành cho doanh nghiệp, bạn có thể tắt tính năng ngừng sử dụng đối với từng người dùng thông qua các cờ Chrome và nút chuyển dòng lệnh:

Việc đặt chrome://flags/#deprecate-unload này thành enabled sẽ đưa ra chế độ mặc định không dùng nữa và ngăn trình xử lý unload kích hoạt. Bạn vẫn có thể ghi đè các yêu cầu này trên từng trang web thông qua Chính sách quyền, nhưng các yêu cầu này sẽ tiếp tục kích hoạt theo mặc định.

Bạn cũng có thể kiểm soát các chế độ cài đặt này bằng các nút chuyển dòng lệnh.

So sánh các tuỳ chọn

Bảng sau đây tóm tắt các cách sử dụng khác nhau của các tuỳ chọn đã thảo luận trước đó:

Đưa tính năng ngừng sử dụng lên trước Đưa tính năng ngừng sử dụng lên trước (có ngoại lệ) Ngăn chặn việc ngừng sử dụng để đảm bảo thời gian di chuyển
Chính sách về quyền
(áp dụng cho trang/trang web)
Chính sách doanh nghiệp
(áp dụng cho thiết bị)
Không Không
Cờ Chrome
(áp dụng cho từng người dùng)
Không Không
Nút chuyển dòng lệnh Chrome
(áp dụng cho từng người dùng)
Không

Kết luận

Các trình xử lý unload sắp ngừng hoạt động. Các sự kiện này đã không đáng tin cậy trong một thời gian dài và không được đảm bảo sẽ được kích hoạt trong tất cả các trường hợp tài liệu bị huỷ. Ngoài ra, trình xử lý unload không tương thích với bfcache.

Những trang web hiện đang sử dụng trình xử lý unload nên chuẩn bị cho việc ngừng sử dụng sắp tới bằng cách kiểm thử mọi trình xử lý unload hiện có, xoá hoặc di chuyển các trình xử lý đó hoặc, như biện pháp cuối cùng, trì hoãn việc ngừng sử dụng nếu cần thêm thời gian.

Lời cảm ơn

Cảm ơn Kenji Baheux, Fergal Daly, Adriana Jara và Jeremy Wagner đã giúp xem xét bài viết này.

Hình ảnh chính của Anja Bauermann trên Unsplash