Chrome 108 cho 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 của họ.
Tuy các chế độ mới này chủ yếu dành cho người dùng, nhưng chúng có một số tác động mà các nhà phát triển web cần lưu ý, vì chúng có thể ả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 các chế độ mới này và những việc mà nhà phát triển web có thể làm để đảm bảo họ mang lại trải nghiệm tốt nhất có thể.
Chế độ 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 được sử dụng trong nền trong một thời gian. Việc này giải phóng bộ nhớ cho 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 và bạn không thể kiểm soát việc này 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 trên dải thẻ nhưng trang đó sẽ biến mất, đúng như thể thẻ đó đóng bình thường. Nếu người dùng truy cập lại vào thẻ đó, trang sẽ tự động tải lại.
Đối với các trang nội dung thuần tuý, việc loại bỏ 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 các 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 vào 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ề chính xác nơi người dùng đã dừng lại.
Chrome đã làm việc này nhiều năm qua để tiết kiệm bộ nhớ, nhưng việc này chỉ được thực hiện trong trường hợp hệ thống chịu áp lực về bộ nhớ. Vì sự cố này tương đối hiếm gặp, nên các nhà phát triển web có thể đã không nhận ra điều này.
Kể từ Chrome 108, việc 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ý các trường hợp này một cách linh hoạt.
Các phương pháp hay nhất để xử lý việc loại bỏ thẻ
Việc loại bỏ 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 (một cách cố ý hay vô tình) trước khi hoàn tất tác vụ của họ. 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à 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 người dùng. Và đây là yếu tố then chốt vì không có sự kiện nào kích hoạt khi thẻ bị loại bỏ, do đó, 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 diễn ra. Thay vào đó, các nhà phát triển cần lường trước 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 trong nền (sự kiện
visibilitychange).
Thời điểm lưu trữ trạng thái kém nhất 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à thời điểm kém 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, kể 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 trang bị loại bỏ. Như bạn có thể thấy từ biểu đồ này, một thẻ có thể chuyển từ trạng thái "ẩn" sang trạng thái "bị loại bỏ" mà không có bất kỳ sự kiện nào được kích hoạt.
Trên thực tế, bất cứ khi nào trang ở trạng thái "bị ẩn", 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 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 người dùng chưa được lưu trong sự kiện visibilitychange, vì bạn có thể sẽ không có cơ hội nào khác.
Đoạn mã sau đây nêu ra một số logic mẫu để xếp hàng đợi duy trì trạng thái người dùng hiện tại bất cứ khi nào trạng thái đó thay đổi hoặc ngay lập tức nếu người dùng chạy thẻ ở chế độ nền hoặc di chuyển 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 một thẻ đã bị huỷ
Như đã đề cập trước đó, bạn không thể phát hiện một thẻ sắp bị loại bỏ, nhưng có thể phát hiện rằng một thẻ đã bị loại bỏ sau khi người dùng quay lại thẻ đó và trang được tải lại. Trong những trường hợp này, thuộc tính document.wasDiscarded sẽ có giá trị true.
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 các loại tình huống này, bạn có thể định cấu hình công cụ phân tích để nắm bắt thông tin này.
Ví dụ: trong Google Analytics, bạn có thể định cấu hình thông số sự kiện tuỳ chỉnh. Thông số này sẽ cho phép bạn xác định tỷ lệ phần trăm lượt xem trang đến từ các lượt loại bỏ thẻ:
gtag('config', 'G-XXXXXXXXXX', {
was_discarded: document.wasDiscarded,
});
Nếu là nhà cung cấp số liệu phân tích, bạn có thể cân nhắc 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 thử cách một trang xử lý việc loại bỏ trang bằng cách tải trang rồi 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ình muốn loại bỏ khỏi danh sách, sau đó nhấp vào Huỷ 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 như khi bạn thoát.
Xin lưu ý rằng hiện không có cách 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ì việc loại bỏ và khôi phục thẻ gần giống với hoạt động tải lại trang, nên nếu bạn kiểm tra xem trạng thái người dùng được khôi phục sau khi tải lại vào giữa luồng người dùng thì có thể hoạt động này cũng sẽ hoạt động tốt. Đ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ẻ bị loại bỏ, vì vậy, bạn có thể sử dụng các lần tải lại để kiểm tra hành vi loại bỏ/khôi phục.
Chế độ Tiết kiệm pin
Khi bạn bật chế độ Trình 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, từ đó ảnh hưởng đến độ chân thực của ảnh động cũng như tốc độ khung hình của video.
Nhìn chung, các nhà phát triển không cần phải làm gì để hỗ trợ chế độ Trình tiết kiệm pin. Các API CSS và JavaScript cho ảnh độ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.
Tình huống chính mà chế độ này có thể gây ra sự cố là khi 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 đúng 16, 67 mili giây sẽ trôi qua giữa các lệnh gọi lại, thì ảnh động sẽ chạy chậm gấp đôi khi bạn bật chế độ Trình tiết kiệm pin.
Xin lưu ý rằng các nhà phát triển luôn gặp khó khă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 này không đúng với nhiều thiết bị hiện tại.
Đo tốc độ làm mới màn hình
Không có API web chuyên dụng để đo lường tốc độ làm mới màn hình. Nhìn chung, bạn không nên làm như vậy bằng các API hiện tại.
Với các API hiện có, cách tốt nhất mà nhà phát triển có thể làm 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, chỉ số này xấp xỉ tốc độ làm mới tại một thời điểm nhất định, nhưng 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 thực hiện một cuộc thăm dò ý kiến requestAnimationFrame(), trong đó không đạt mục tiêu bảo toàn 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ế độ Trình tiết kiệm pin
Một cách để kiểm tra trang web của bạn ở chế độ Trình 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 không có thiết bị có 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://discardsrồi nhấp vào đường liên kết Bật/tắt chế độ tiết kiệm pin (quan trọng: bạn cần bật cờ#battery-saver-mode-availableđể đường liên kết này 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ứ diễn ra bình thường: ví dụ như ảnh động và hiệu ứng chuyển tiếp chạy ở tốc độ mong muốn.
Tóm tắt
Mặc dù 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 vẫn có những ảnh hưởng đối với 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 nếu bạn không xử lý đúng cách.
Nhìn chung, các chế độ mới này được thiết kế theo các phương pháp hay nhất hiện có dành cho nhà phát triển. Nếu các nhà phát triển đã và đang làm theo các phương pháp hay nhất về web lâu dài thì trang web của họ sẽ tiếp tục hoạt động tốt với các chế độ mới này.
Tuy nhiên, nếu trang web của bạn có chứa bất kỳ phương pháp nào được nêu trong bài đăng này, thì có khả năng người dùng của bạn đang gặp phải các vấn đề. Các vấn đề này 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 đến một 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 những điều kiện đó của người dùng.