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 kiểm soát tốt hơn 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 các nhà phát triển web cần lưu ý một số tác động quan trọng 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 những tác động tiềm ẩn của các chế độ mới này và những việc 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ế độ 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ỏ những thẻ không được sử dụng trong nền trong một khoảng thời gian. Việc này sẽ 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ể yêu cầu Chrome không loại bỏ các thẻ cho một số trang web cụ thể; tuy nhiên, đây là lựa chọn ưu tiên của người dùng và không phải là điều mà 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 vẫn xuất hiện trong dải thẻ nhưng chính trang đó đã biến mất, giống như khi thẻ đã được đóng bình thường. Nếu người dùng truy cập lại thẻ đó, trang sẽ tự động tải lại.
Đối với các trang chỉ chứa nội dung, 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 tương tác, đa dạng thức có luồng người dùng phức tạp, việc tải lại giữa luồng đó có thể gây khó chịu cực độ nếu trang web không thể khôi phục trang chính xác đến nơi người dùng đã dừng lại.
Việc loại bỏ các thẻ để tiết kiệm bộ nhớ là điều mà Chrome đã thực hiện trong nhiều năm, nhưng chỉ được thực hiện trong những trường hợp hệ thống chịu áp lực về bộ nhớ. Do sự cố này xảy ra tương đối hiếm, nên các nhà phát triển web có thể không nhận ra điều đó.
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ý những 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 một trang (có chủ ý hoặc vô tình) trước khi hoàn tất tác vụ của họ. Vì vậy, các trang web luôn cần 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 đ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. Đây là điểm 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 thể phản ứng với việc thẻ bị loại bỏ. Thay vào đó, 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ẻ chạy ở chế độ nền (sự kiện
visibilitychange).
Những thời điểm tệ 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 tệ 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 trong Vòng đời trang để xem những sự kiện nào 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ơ đồ đó, 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ó sự kiện nào kích hoạt.
Trên thực tế, bất cứ khi nào trang ở trạng thái "ẩn", bạn không thể đảm bảo rằng bất kỳ sự kiện nào khác sẽ kích hoạt trước khi trình duyệt loại bỏ hoặc người dùng chấm dứt trang. Đó là lý do bạn phải luôn lưu trữ mọi trạng thái người dùng chưa lưu trong sự kiện visibilitychange, vì bạn có thể không có cơ hội khác.
Mã sau đây trình bày một số logic mẫu để đưa trạng thái người dùng hiện tại vào hàng đợ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 chuyển sang chế độ nền cho thẻ hoặc rời khỏi thẻ:
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ị loại bỏ
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 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ẽ là 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 những 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ể định cấu hình một thông số sự kiện tuỳ chỉnh để 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 dịch vụ phân tích, bạn nên cân nhắc thêm phương diện này vào sản phẩm theo mặc định.
Kiểm thử trang web ở 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 bị loại bỏ 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à bạn muốn loại bỏ khỏi danh sách, sau đó nhấp vào Huỷ khẩn cấp trong cột Thao tác.
Thao tác này sẽ loại bỏ thẻ, cho phép bạn truy cập lại thẻ đó và xác minh rằng trang đã được tải lại về trạng thái như khi bạn rời khỏi trang.
Xin lưu ý rằng hiện không có cách nào để tự động loại bỏ thẻ thông qua các công cụ kiểm thử 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 việc tải lại trang, nên nếu bạn kiểm thử trạng thái người dùng được khôi phục sau khi tải lại ở giữa luồng người dùng, thì trạng thái đó cũng có thể hoạt động cho thao tác loại bỏ/khôi phục. Sự khác biệt chính giữa hai chế độ 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, miễn là bạn không dựa vào các sự kiện đó để duy trì trạng thái người dùng, bạn có thể sử dụng tính năng tải lại để kiểm thử hành vi loại bỏ/khôi phục.
Chế độ Trình tiết kiệm pin
Khi chế độ Trình tiết kiệm pin được bật, 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 độ trung thực của hiệu ứng cuộn và ảnh động cũng như 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 năng lượng. Các 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 màn hình khi chế độ này được bật.
Trường hợp chính mà chế độ này có thể gây ra vấn đề là nếu trang web của bạn sử dụng ảnh động dựa trên JavaScript giả định 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 các vòng lặp requestAnimationFrame() và giả định rằng sẽ mất đúng 16, 67 mili giây giữa các lệnh gọi lại, thì ảnh động sẽ chạy chậm gấp đôi khi bật chế độ Tiết kiệm pin.
Xin lưu ý rằng việc các nhà phát triển giả định tốc độ làm mới mặc định là 60 Hz cho tất cả người dùng luôn là vấn đề, vì điều này không đúng với nhiều thiết bị hiện tại.
Đo lường tốc độ làm mới màn hình
Không có API web chuyên dụng để đo tốc độ làm mới màn hình và nói chung, bạn không nên cố gắng đo tốc độ làm mới màn hình bằng các API hiện tại.
Việc 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 trường hợp, phương thức này hoạt động để ước chừng tốc độ làm mới tại một thời điểm nhất định, nhưng phương thức này không cho bạn biết thời điểm tốc độ làm mới thay đổi. Để làm được điều đó, bạn phải liên tục chạy một cuộc thăm dò ý kiến requestAnimationFrame(), điều này sẽ làm mất đi 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 thử trang web ở chế độ Trình tiết kiệm năng lượng
Một cách để kiểm thử trang web ở 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 chế độ này để chạy khi thiết bị của bạn 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 vào
chrome://discardsrồi nhấp vào đường liên kết Bật/tắt chế độ tiết kiệm pin (lưu ý quan trọng: bạn cần bật cờ#battery-saver-mode-availableđể đường liên kết hoạt động).
Sau khi bật, bạn có thể tương tác với trang web và xác minh rằng mọi thứ đều trông như mong đợi: ví dụ: ảnh động và hiệu ứng chuyển đổi chạy ở tốc độ mong muốn.
Tóm tắt
Mặc dù chế độ Trình tiết kiệm pin và Trình tiết kiệm bộ nhớ 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 có tác động đến nhà phát triển vì có thể ảnh hưởng tiêu cực đến trải nghiệm truy cập vào 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ó dành cho nhà phát triển. Nếu nhà phát triển đã tuân theo các phương pháp hay nhất lâu đời dành cho web, 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 chứa bất kỳ phương pháp nào được nêu trong bài đăng này, thì có thể người dùng của bạn đang gặp phải các vấn đề sẽ chỉ tăng lên khi bật hai chế độ này.
Như mọi khi, 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à kiểm thử trang web của mình với các điều kiện phù hợp với người dùng.