Chrome 108 ra mắt hai chế độ mới là Trình tiết kiệm bộ nhớ và Trình tiết kiệm pin, giúp người dùng có nhiều quyền kiểm soát hơn đối với cách Chrome sử dụng tài nguyên hệ thống.
Mặc dù các chế độ mới này chủ yếu dành cho người dùng, nhưng chúng cũng có một số ý nghĩa quan trọng mà các nhà phát triển web cần phải biết vì chúng có khả năng ảnh hưởng đến trải nghiệm người dùng trên trang web của bạn.
Bài đăng này sẽ đề cập đến tác động tiềm năng của những chế độ mới này và những việc mà nhà phát triển web có thể làm để đảm bảo mang lại trải nghiệm tốt nhất có thể.
Chế độ Trình tiết kiệm bộ nhớ
Khi bạn bật chế độ Trình tiết kiệm bộ nhớ, Chrome sẽ chủ động loại bỏ các thẻ không dùng đến trong nền trong một khoảng thời gian. Việc này giải phóng bộ nhớ cho các thẻ đang hoạt động cũng như các ứng dụng khác có thể đang chạy. Người dùng có thể hướng dẫn Chrome không loại bỏ thẻ cho các trang web cụ thể; tuy nhiên, đây là lựa chọn ưu tiên của người dùng chứ không phải là bạn có thể kiểm soát với tư cách là nhà phát triển.
Khi một thẻ bị loại bỏ, tiêu đề và biểu tượng trang web của thẻ vẫn xuất hiện trong dải thẻ nhưng trang đó sẽ biến mất, chính xác như thể thẻ đã được đóng bình thường. Nếu người dùng truy cập lại vào thẻ đó, thì trang sẽ tự động tải lại.
Đối với các trang chỉ chứa nội dung, việc hủy và tải lại một thẻ có thể sẽ không ảnh hưởng đến trải nghiệm người dùng. Tuy nhiên, đối với những trang web giàu tính tương tác có luồng người dùng phức tạp, việc tải lại ở giữa quy trình đó có thể cực kỳ khó chịu nếu trang web không thể khôi phục trang về đúng vị trí người dùng đã dừng lại.
Loại bỏ thẻ để tiết kiệm bộ nhớ là một tính năng mà Chrome đã thực hiện trong nhiều năm, nhưng chỉ thực hiện khi hệ thống chịu áp lực về bộ nhớ. Vì sự cố này tương đối hiếm, nên các nhà phát triển web có thể đã không nhận ra điều đó đã xảy ra.
Kể từ Chrome 108, hoạt động loại bỏ thẻ sẽ trở nên phổ biến hơn, vì vậy, điều quan trọng là các trang web có thể xử lý những lần xuất hiện này một cách linh hoạt.
Các phương pháp hay nhất để xử lý lượt huỷ thẻ
Việc huỷ thẻ không phải là một thách thức mới đối với các nhà phát triển web. Người dùng luôn có thể tải lại trang – dù cố ý hay vô tình – trước khi hoàn tất tác vụ của mình. Vì vậy, điều quan trọng là các trang web phải lưu trữ trạng thái người dùng để có thể khôi phục trạng thái đó nếu người dùng rời khỏi và quay lại.
Điều quan trọng nhất cần cân nhắc không phải là việc có lưu trữ trạng thái người dùng hay không mà là thời điểm lưu trữ trạng thái đó. Đây là vấn đề quan trọng vì không có sự kiện nào kích hoạt khi một thẻ bị loại bỏ, vì vậy nhà phát triển không có cách nào để phản ứng với thực tế là sự kiện đó đang xảy ra. Thay vào đó, các nhà phát triển cần dự đoán khả năng này và chuẩn bị trước.
Thời điểm tốt nhất để lưu trữ trạng thái người dùng là:
- Định kỳ khi trạng thái thay đổi.
- Bất cứ khi nào một thẻ được chạy ở chế độ nền (sự kiện
visibilitychange).
Thời điểm kém nhất để lưu trữ trạng thái là:
- Trong lệnh gọi lại sự kiện
beforeunload. - Trong lệnh gọi lại sự kiện
unload.
Đây là những thời điểm xấu nhất để lưu trữ trạng thái vì những sự kiện này hoàn toàn không đáng tin cậy và không kích hoạt trong nhiều trường hợp, bao gồm cả khi một thẻ bị loại bỏ.
Bạn có thể tham khảo sơ đồ sự kiện Vòng đời của trang để xem những sự kiện dự kiến sẽ kích hoạt khi một trang bị loại bỏ. Như bạn có thể thấy trong sơ đồ này, một thẻ có thể đi từ thẻ "ẩn" thành "đã loại bỏ" khi chưa có bất kỳ sự kiện nào kích hoạt.
Trên thực tế, bất cứ khi nào trang bị "ẩn" trạng thái, không có gì đảm bảo rằng mọi sự kiện khác sẽ kích hoạt trước khi trang bị trình duyệt huỷ hoặc bị người dùng chấm dứt. Đó là lý do bạn phải luôn lưu trữ mọi trạng thái chưa được lưu của người dùng trong sự kiện visibilitychange để tránh xảy ra trường hợp như vậy.
Mã sau đây trình bày một số logic ví dụ để duy trì trạng thái của người dùng hiện tại bất cứ khi nào trạng thái này thay đổi hoặc ngay lập tức khi người dùng chạy thẻ ở chế độ nền hoặc điều hướng khỏi:
let state = {};
let hasUnstoredState = false;
function storeState() {
if (hasUnstoredState) {
// Store `state` to localStorage or IndexedDB...
}
hasUnstoredState = false;
}
export function updateState(newState) {
state = newState;
hasUnstoredState = true;
requestIdleCallback(storeState);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
storeState();
}
});
Phát hiện thấy một thẻ đã bị loại bỏ
Như đã đề cập trước đó, không thể phát hiện xem một thẻ sắp bị loại bỏ, nhưng có thể phát hiện ra rằng một thẻ đã bị loại bỏ sau khi người dùng quay lại và trang được tải lại. Trong những trường hợp này, thuộc tính document.wasDiscarded sẽ vẫn đúng.
if (document.wasDiscarded) {
// The page was reloaded after a discard.
} else {
// The page was not reloaded after a discard.
}
Nếu muốn biết tần suất người dùng gặp phải những loại tình huống này, bạn có thể định cấu hình công cụ phân tích để thu thập thông tin này.
Ví dụ: trong Google Analytics, bạn có thể thiết lập một thông số sự kiện tuỳ chỉnh để cho phép xác định tỷ lệ phần trăm số lượt xem trang đến từ lượt bỏ qua thẻ:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Nếu là nhà cung cấp phân tích, bạn có thể muốn xem xét việc thêm phương diện này vào sản phẩm của mình theo mặc định.
Kiểm tra trang web của bạn ở chế độ Trình tiết kiệm bộ nhớ
Bạn có thể kiểm tra cách trang xử lý việc bị loại bỏ bằng cách tải trang, sau đó truy cập vào chrome://discards trong một thẻ hoặc cửa sổ riêng.
Trên giao diện người dùng chrome://discards, bạn có thể tìm thẻ mà bạn muốn loại bỏ khỏi danh sách, rồi nhấp vào Loại bỏ khẩn cấp trong cột Hành động.
Thao tác này sẽ loại bỏ thẻ, cho phép bạn truy cập lại vào thẻ và xác minh rằng trang đã được tải lại về trạng thái ban đầu khi bạn rời khỏi.
Lưu ý rằng hiện chưa có cách nào để tự động hoá việc huỷ thẻ thông qua các công cụ thử nghiệm như webdriver hoặc puppeteer; tuy nhiên, vì thẻ bị huỷ và khôi phục gần giống với thao tác tải lại trang, nên nếu bạn kiểm tra trạng thái người dùng được khôi phục sau khi tải lại ở giữa luồng của người dùng, thì thao tác này cũng có thể phù hợp với thao tác huỷ/khôi phục. Điểm khác biệt chính giữa 2 sự kiện này là các sự kiện beforeunload, pagehide và unload không kích hoạt khi một thẻ đang bị loại bỏ. Vì vậy, miễn là bạn không dựa vào những sự kiện đó để duy trì trạng thái của người dùng, bạn có thể sử dụng các lượt tải lại để kiểm thử hành vi huỷ/khôi phục.
Chế độ Tiết kiệm pin
Khi bạn bật chế độ Tiết kiệm pin, Chrome sẽ tiết kiệm pin bằng cách giảm tốc độ làm mới màn hình, ảnh hưởng đến độ chân thực của ảnh động và tính năng cuộn, tốc độ khung hình của video.
Nhìn chung, nhà phát triển không cần làm gì để hỗ trợ chế độ Tiết kiệm pin. API CSS và JavaScript cho ảnh động, hiệu ứng chuyển đổi và requestAnimationFrame() sẽ tự động điều chỉnh theo mọi thay đổi về tốc độ làm mới hiển thị khi chế độ này được bật.
Trường hợp chính mà chế độ này có thể gặp sự cố là nếu trang web của bạn sử dụng ảnh động dựa trên JavaScript giả định một tốc độ làm mới cụ thể cho tất cả người dùng.
Ví dụ: nếu trang web của bạn sử dụng vòng lặp requestAnimationFrame() và giả định rằng chính xác 16, 67 mili giây giữa các lệnh gọi lại đã trôi qua, thì ảnh động sẽ chạy chậm gấp đôi khi chế độ Tiết kiệm pin được bật.
Xin lưu ý rằng việc này luôn là vấn đề đối với các nhà phát triển khi giả định tốc độ làm mới mặc định là 60 Hz cho tất cả người dùng, vì điều đó không đúng với nhiều thiết bị hiện tại.
Đo lường tốc độ làm mới hiển thị
Hiện chưa có API web chuyên dụng để đo lường tốc độ làm mới của màn hình. Nhìn chung, bạn không nên cố gắng thực hiện việc này với các API hiện tại.
Cách tốt nhất mà nhà phát triển có thể làm với các API hiện có là so sánh dấu thời gian giữa các lệnh gọi lại requestAnimationFrame() liên tiếp. Mặc dù trong hầu hết các trường hợp, tính năng này chỉ để ước tính tốc độ làm mới tại một thời điểm nhất định, nhưng sẽ không cho bạn biết khi nào tốc độ làm mới thay đổi. Để làm được việc đó, bạn phải liên tục chạy cuộc thăm dò ý kiến trên requestAnimationFrame(). Thao tác này không đạt được mục tiêu tiết kiệm năng lượng hoặc thời lượng pin cho người dùng.
Kiểm tra trang web của bạn ở chế độ Tiết kiệm pin
Một cách để kiểm tra trang web của bạn ở chế độ Tiết kiệm pin là bật chế độ này trong phần cài đặt của Chrome và định cấu hình để trang web chạy khi thiết bị không cắm điện.
Nếu thiết bị của bạn không thể rút phích cắm, bạn cũng có thể bật chế độ này theo cách thủ công bằng cách làm theo các bước sau:
- Bật cờ
chrome://flags/#battery-saver-mode-available. - Truy cập
chrome://discardsvà nhấp vào liên kết Bật/tắt chế độ tiết kiệm pin (quan trọng: cần bật cờ#battery-saver-mode-availableđể liên kết hoạt động).
Sau khi bật, bạn có thể tương tác với trang web của mình và xác minh rằng mọi thứ đều ổn định: ví dụ: các ảnh động và hiệu ứng chuyển tiếp sẽ chạy ở tốc độ mong muốn.
Tóm tắt
Mặc dù các chế độ Trình tiết kiệm bộ nhớ và Trình tiết kiệm pin của Chrome chủ yếu là các tính năng dành cho người dùng, nhưng chúng cũng ảnh hưởng đến nhà phát triển vì chúng có thể ảnh hưởng tiêu cực đến trải nghiệm truy cập trang web của bạn nếu không được xử lý đúng cách.
Nhìn chung, các chế độ mới này được thiết kế dựa trên các phương pháp hay nhất hiện có của nhà phát triển. Nếu nhà phát triển đã làm theo các phương pháp hay nhất cho web từ lâu, thì trang web của họ sẽ tiếp tục hoạt động tốt với những chế độ mới này.
Tuy nhiên, nếu trang web của bạn chứa bất kỳ phương pháp nào được nêu trong bài đăng này, có thể người dùng của bạn đang gặp phải các vấn đề sẽ chỉ gia tăng khi bật hai chế độ này.
Như thường lệ, cách tốt nhất để xác nhận rằng bạn đang mang lại trải nghiệm tuyệt vời là thử nghiệm trang web của bạn với các điều kiện phù hợp với điều kiện của người dùng.