Back/Forward Cache (bfcache)

Back/Forward Cache (bfcache) is a concept in web development that enhances user experience by providing instant navigation to previously visited pages. This feature allows web pages to be stored in memory when the user navigates away, enabling near-instantaneous loading when the user navigates back or forward using the browser’s history buttons. By keeping a "snapshot" of the page in its current state, bfcache significantly improves performance and reduces the perceived load time when revisiting pages.

前进/后退缓存 (bfcache) 是Web开发中的一个概念，它通过提供对以前访问的页面的即时导航来增强用户体验。这个特性允许在用户导航离开时将网页存储在内存中，当用户使用浏览器的历史按钮前进或后退导航时，能够近乎即时地加载。通过保留页面当前状态的“快照”，bfcache显著提高了性能，并减少了重新访问页面时的感知加载时间。

Here’s how Back/Forward Cache (bfcache) works in theory:

以下是前进/后退缓存 (bfcache) 在理论上的工作原理：

1. Page Navigation: When a user navigates away from a page, the page is not immediately discarded but instead stored in memory as part of the bfcache.

   页面导航: 当用户离开页面时，该页面不会立即被丢弃，而是作为bfcache的一部分存储在内存中。

2. Instant Restoration: If the user navigates back to the page using the browser’s back or forward buttons, the page is instantly restored from the bfcache, preserving its state, such as scroll position, form inputs, and media playback.

   即时恢复: 如果用户使用浏览器的前进或后退按钮导航回页面，该页面将从bfcache中即时恢复，并保留其状态，例如滚动位置、表单输入和媒体播放。

3. Enhanced Performance: Since the page is restored from memory rather than reloaded from the network, the navigation is near-instantaneous, providing a smoother user experience.

   增强性能: 由于页面是从内存中恢复的，而不是从网络重新加载，因此导航几乎是即时的，从而提供更流畅的用户体验。

Here’s an example scenario of how bfcache improves user experience:

以下是bfcache如何改善用户体验的示例场景：

1. User visits a product page on an e-commerce site.
2. User navigates to a different product page.
3. User presses the back button to return to the previous product page.
4. The previous page loads instantly with the same scroll position and inputs, providing a seamless experience.

1. 用户访问一个电商网站的产品页面。
2. 用户导航到另一个产品页面。
3. 用户按下后退按钮返回到之前的产品页面。
4. 上一个页面立即加载，并保留相同的滚动位置和输入，从而提供无缝的体验。

The comparison of Back/Forward Cache with other caching methods is shown in the table below:

前进/后退缓存 (bfcache) 与其他缓存方法的比较如下表所示：

Back/Forward Cache is very useful for improving user experience by making navigation between recently visited pages instantaneous, reducing perceived load times, and maintaining the state of the pages.

前进/后退缓存 (bfcache) 在通过使最近访问的页面之间的导航即时化、减少感知加载时间并保持页面状态来改善用户体验方面非常有用。

以下是关于前进/后退缓存 (bfcache) 的5个面试问题及其答案

1. What is Back/Forward Cache (bfcache), and how does it enhance user experience?

什么是前进/后退缓存 (bfcache)，它如何增强用户体验？

Back/Forward Cache (bfcache) stores previously visited pages in memory, allowing instant navigation back and forth between pages, thus improving user experience.

前进/后退缓存 (bfcache) 将以前访问的页面存储在内存中，允许页面之间即时导航，从而改善用户体验。

2. How does bfcache differ from regular browser caching mechanisms?

bfcache 与常规浏览器缓存机制有何不同？

bfcache stores the entire page in its current state, including scroll position and inputs, while regular caching mechanisms store static assets like HTML, CSS, and JavaScript files.

bfcache 将整个页面及其当前状态（包括滚动位置和输入）存储，而常规缓存机制存储静态资源，例如HTML、CSS和JavaScript文件。

3. What types of pages are most suitable for bfcache?

哪种类型的页面最适合使用 bfcache？

Pages that require frequent navigation, such as e-commerce product pages or content-heavy sites where users often navigate back and forth, are most suitable for bfcache.

需要频繁导航的页面，例如电商产品页面或用户经常前后导航的内容丰富的网站，最适合使用 bfcache。

4. What are the limitations of bfcache?

bfcache 有哪些限制？

bfcache may not work if pages have certain characteristics, such as open network connections, active WebSockets, or the use of certain APIs like beforeunload.

如果页面具有某些特性，例如打开的网络连接、活动的WebSocket或使用某些API（如beforeunload），bfcache 可能无法工作。

5. How does bfcache improve performance in web applications?

bfcache 如何提高Web应用程序的性能？

bfcache improves performance by allowing instant restoration of pages from memory rather than reloading them from the network, which reduces perceived load times.

bfcache 通过允许页面从内存中即时恢复，而不是从网络重新加载，从而减少感知加载时间，进而提高性能。

Recommended Resources:

1. MDN Web Docs: Back/Forward Cache
2. Google Developers: bfcache

Debugging bfcache, make your page load instantly #DevToolsTips Chrome for Developers