bfcache: Kỹ thuật cache giúp tăng tốc độ điều hướng trang web (Phần 1)

bfcache là kỹ thuật cache lưu lại trạng thái của trang web hiện tại vào bộ nhớ khi người dùng điều hướng đến một trang mới. bfcache giúp trình duyệt có tốc độ điều hướng nhanh, giảm thiểu mức sử dụng dữ liệu vì tài nguyên chỉ tải duy nhất trong lần đầu.

Upload image

Khi lướt web, bạn có hay click 'Back' hay 'Forward' trên trình duyệt để truy cập qua lại giữa các trang không? Đây là chuỗi hành động liên tục quay về (back) trang kết quả và lần lượt truy cập từ mục này đến mục khác để 'chắt lọc' thông tin cần thiết, thậm chí bao gồm cả việc chuyển tiếp (forward) đến các trang mà bạn đã truy cập trước đó. Thao tác 'Back/Forward' này dần trở thành một thói quen khi lướt web, tuy nhiên nó lại khiến trình duyệt phát sinh một số vấn đề trong trải nghiệm người dùng.

Yếu tố nào mang đến cho người dùng trải nghiệm lướt web tốt? Câu trả lời phổ biến sẽ là mạng hoặc thiết bị mạnh. Tuy nhiên, hai yếu tố đó vẫn chưa đủ nếu như bạn là người thường xuyên phải thao tác với các nút 'Back' và 'Forward' trên trình duyệt.

Hãy cùng xem các video demo dưới đây để tìm ra vấn đề nằm ở đâu nhé!

Trải nghiệm trên desktop

Trải nghiệm trên mobile

Video mô phỏng lại hành vi sử dụng trang web của người dùng truy cập rất nhiều trang web và luôn có nhu cầu để quay lại. Với việc không dùng bfcache, bạn luôn phải chờ trình duyệt tải lại từ đầu trang web dù bạn đã vào trước đó. Đây là điểm chưa tối ưu của trình duyệt khiến cho trải nghiệm người dùng không được tốt, đặc biệt là với thiết bị chậm chạp hay mạng kết nối không ổn định, thậm chí dù thiết bị hay mạng có tốt đi chăng nữa thì người dùng vẫn cảm thấy có một độ 'khựng' nhất định trong trải nghiệm này.

Ngược lại, với 'tôn chỉ' chỉ tải resource một lần cho trang web, bfcache mang đến cho người dùng trải nghiệm lướt web mượt mà hơn vì tốc độ điều hướng đến các trang được tải trước đó cực kì nhanh và gần như là tức thì. Vậy điều gì đã tạo nên kỹ thuật cache tối ưu này?

bfcache là gì?

bfcache viết tắt bởi Back/Forward cache - một kỹ thuật cache lưu lại trạng thái của trang web hiện tại vào bộ nhớ mỗi khi người dùng điều hướng đến một trang mới. Thông qua thao tác 'Back' hay 'Forward' mà trình duyệt sẽ khôi phục lại nhanh chóng trang web trước đó từ bộ nhớ thay vì phải tải lại.

Với bfcache, trình duyệt không chỉ có tốc độ điều hướng nhanh mà còn có thể giảm thiểu mức sử dụng dữ liệu vì tài nguyên chỉ tải duy nhất trong lần đầu.

Thống kê về dữ liệu sử dụng Chrome cũng chỉ ra rằng có khoảng 10% thao tác điều hướng trên desktop và 20% thao tác điều hướng trên mobile xuất phát từ thao tác back và forward trên trình duyệt. Nó có vẻ phổ biến hơn khi bạn là người có nhu cầu thu thập nhiều thông tin cần thiết hay xu hướng sử dụng mobile nhiều hơn.

Ước tính, khi áp dụng kỹ thuật bfcache này, trình duyệt có thể loại bỏ việc truyền tải dữ liệu và thời gian tải hàng tỷ trang web mỗi ngày.

Khả năng tương thích

Kỹ thuật bfcache đã xuất hiện từ rất lâu trên các trình duyệt Firefox (2005) hay Safari (2009) nhưng mãi đến phiên bản thứ 96 của Chrome thì kỹ thuật này mới được hỗ trợ hoàn toàn trên cả desktop và mobile cho loại trình duyệt phổ biến này.

Cơ chế hoạt động

Về kỹ thuật, bfcache là một bộ nhớ đệm in-memory (cho mục đích bảo toàn trạng thái JavaScript và cây DOM) dùng để lưu trữ một snapshot hoàn chỉnh của một trang web bao gồm cả bộ nhớ heap trong JavaScript mỗi khi người dùng điều hướng đi.

Snapshot có thể hiểu là toàn bộ trạng thái hay hiện trạng của trang web mà bạn để lại sau khi điều hướng đi đến một trang khác, và sau khi bạn quay lại thì trình duyệt sẽ ngay lập tức khôi phục đầy đủ trạng thái của trang web tại thời điểm đó.

Trạng thái hay hiện trạng của trang web có thể là những tài nguyên chỉ dùng để hiển thị cho snapshot của trang web (không phải là tất cả tài nguyên của một trang) hay nó còn là các tác vụ như là timers, promises, ... đang được xử lý trong task queues. Khi bạn điều hướng đi thì các tác vụ này sẽ dừng lại và tiếp tục được xử lý khi quay lại trang. Có thể xem nó giống như việc bạn tạm dừng một video nào đó và khi bạn bật lại video sẽ phát tiếp tục từ khoảng thời gian mà bạn bấm dừng.

Lợi ích

Mình sẽ tổng hợp lại một số lợi ích khi sử dụng bfcache như sau:

  • Tăng tốc độ điều hướng đến trang web
  • Giảm mức độ sử dụng dữ liệu, tránh tải nhiều lần một resource
  • Tải lại trang nhanh hơn đáng kể (gần như ngay lập tức)

Với lợi ích mà kỹ thuật này mang lại, bạn có thể dễ dàng truy cập lại nhanh chóng các trang web mà bạn đã đi qua thông qua thao tác back và forward.

Kết

bfcache là một kỹ thuật được cài đặt mặc định cho nhiều trình duyệt phổ biến hiện nay (Safari, Firefox, Chrome) để sẵn sàng lưu trữ các trang web cho mục đích điều hướng đi hay điều hướng về, giúp người dùng có trải nghiệm lướt web mượt mà hơn rất nhiều.

Về mặt phát triển ứng dụng, mặc dù bfcache là kỹ thuật đã 'âm thầm' áp dụng trong trình duyệt nhưng nó vẫn có một số quy tắc mà developer cần phải tuân theo hay dựa vào tính chất của trang web mà chúng ta có nên áp dụng nó hay không. Bên cạnh đó, cũng có một vài sự đánh đổi khi dùng kỹ thuật cache này.

Ở phần tiếp theo, mình sẽ phân tích những điều vừa kể trên cũng như có so sánh bfcache với một kỹ thuật cache khác - HTTP Cache để có cái nhìn chi tiết hơn về kỹ thuật này.

Back/forward cache

Exploring a back/forward cache for Chrome

Atekco - Home for Authentic Technical Consultants