浏览器的 Back/Forward cache（也称为 bfcache）是一种优化技术，旨在提高用户在浏览网页时的体验，特别是在进行前进（forward）和后退（back）导航操作时。
当用户在浏览器中访问一个网页后点击链接或者输入新的 URL 前往另一个页面时，浏览器通常会销毁或丢弃前一个页面的状态信息，包括 DOM 结构、JavaScript 执行环境以及可能的 AJAX 请求结果等。当用户随后点击后退按钮返回到先前的页面时，浏览器需要重新发起网络请求，解析 HTML，构建 DOM 树，执行 JavaScript 代码，这可能会导致一定的延迟和性能损耗。
Back/Forward cache 就是为了改善这种情况而引入的。以下是其工作原理和特点：
| 特性 | 描述 |
|---|---|
| 保存页面状态 | 浏览器在 bfcache 中存储离开页面时的完整状态，包括 DOM 树、样式信息、JavaScript 变量值及滚动位置等 |
| 快速恢复 | 用户通过后退/前进按钮返回已缓存页面时，浏览器直接从 bfcache 恢复页面状态，显著提升页面显示速度 |
| 有条件缓存 | 并非所有页面都适合缓存到 bfcache，如使用不兼容技术（定时器、音频视频播放、WebSocket）或有未完成任务的页面可能不被缓存 |
| 无脚本执行 | 页面从 bfcache 恢复时通常不会重新执行 JavaScript 代码，JavaScript 环境保持冻结直至用户再次离开并返回 |
| 容量限制 | bfcache 存储量有限，浏览器根据内存等因素自动管理缓存页面，满载时会移除旧页面以释放空间 |
| 跨域限制 | 考虑安全性，跨域 iframe 通常不会被 bfcache 存储 |
| 开发者控制 | 开发者可通过特定 HTTP 头部或 JavaScript API 控制页面是否应被 bfcache 缓存 |
Back/Forward cache 的实现和行为可能在不同的浏览器中有所不同。例如，截至 2023 年，谷歌 Chrome 浏览器已经支持并默认开启了该功能（但早期可能需要手动启用实验性选项）。通过理解并优化对 bfcache 的支持，开发者可以提升其网站或应用的用户体验和性能。
网友评论