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ỏ các thẻ không dùng đến 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ể hướng dẫn 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 theo cách thông 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 này.
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 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 mấu chốt 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).
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 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 của 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 "bị ẩn" sang trạng thái "đã loại bỏ" mà không 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 ở trạng thái "bị ẩn", không có đảm bảo rằng bất kỳ sự kiện nào khác sẽ kích hoạt trước khi trang bị trình duyệt loại bỏ hoặc bị người dùng chấm dứt. Đó là lý do tại sao bạn phải luôn lưu trữ mọi trạng thái chưa lưu của người dùng trong sự kiện visibilitychange vì bạn có thể sẽ không gặp được cơ hội nào 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 đó, 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ẽ 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ừ việc loại bỏ 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 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 giống như khi bạn rời khỏi trang.
Lưu ý rằng hiện chưa 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ì thẻ loại bỏ và khôi phục gần giống với thao tác tải lại trang, 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 người dùng, nó cũng có thể hoạt động đối với việc huỷ/khôi phục. Sự khác biệt chính giữa hai cá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ế độ 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 pin. 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 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 màn hình
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.
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
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ù 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ư 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.