一、bfcache 基本概念

现代浏览器在根据历史记录进行前进/后退操作时，会启用缓存机制，名为“bfcache”（back-forward cache，往返缓存），它使页面导航非常快。直到用户关闭浏览器，这个缓存状态才会被删除。

从 MDN 上得知，支持 bfcache 特性的 Firefox 浏览器，对于一个简单的浏览器会话，会缓存全部页面到内存中，包括他们的JavaScript状态。直到用户关闭浏览器，这个缓存状态才会被删除。bfcache 是一种浏览器优化，但是 HTML 标准中并未指定浏览器如何进行缓存，因此不同的浏览器的缓存策略也与 Firefox 的不同。

MDN 上还指出一些Firefox不会缓存页面的情况，如下：

  • 页面绑定了 unload 或 beforeunload 事件；
  • 页面设置“cache-control: no-store”；
  • 站点是HTTPS且页面至少存在一个如下设置：
    • “Cache-Control: no-cache”
    • “Pragma: no-cache”
    • “Expires: 0”或赋予“Expires”一个相对于“Date”的过去日期（除非“Cache-Control: max-age=”也定义了）
  • 当用户导航离开页面时，该页面没有完全加载，或因为其他原因等待网络（例如，XMLHttpRequest）；
  • 页面执行IndexedDB事务；

二、不同浏览器中的不同策略

1. 测试设计

测试页面有两个，代码分别如下。

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Page 1</title>

</head>

<body>

  <img src="//static.symind.top/images/fruit.png">

  <p>Page 1.</p>

  <a href="page2.html">Go to page 2.</a>

  <script>

    var p = document.createElement('p');

    document.body.appendChild(p);

    var i = 0;

    var time = setInterval(function () {

      p.innerText = i++;

    }, 1000);

    window.onload = function () {

      alert('onload...');

    }

  </script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Page 2</title>

</head>

<body>

  <p>Page 2.</p>

  <a href="javascript:goback()">后退</a>

  <script>

    function goback () {

      window.history.back();

    }

  </script>

</body>

</html>

2. 测试结果

浏览器 版本 是否缓存 DOM 是否缓存页面中的静态资源 是否缓存 js 执行状态 是否触发 load 事件
Desktop Chrome 60.0.3112.101（正式版本）（64 位） 否 是 否 是
Desktop Firfox 58.0.2（64位） 是 是 是 否
QQ浏览器 8.2.0.3950（安卓版） 是 是 是 否

注意：缓存 js 执行状态表示离开当前页面时，js 将停止执行，返回后会继续执行。现在的很多手机浏览器并非使用 bfcache 特性来提高页面导航速度，而是将每个页面都封装成类似于一个 WebView 的形式，如，小米手机浏览器。而使用这种方式的浏览器，即使离开页面后，js 仍会继续执行，且不会触发下面介绍的 pageshow 与 pagehide 事件。

备注：在 Desktop Chrome 触发了“往返缓存”时，在开发者工具中能看到 HTTP 请求的状态码（Status Code）为 200 OK (from disk cache)，如下图。

 三、新的事件

尽管由于内存中保存了整个页面的状态，不触发load事件也不会导致什么问题，但为了更形象地说明 bfcache 的行为，浏览器还提供了一些新事件 pageshow 和 pagehide。

1. pageshow 事件

该事件与 load 事件相似，但是它在页面的每次加载时都会触发（当页面触发 bfcache 特性使用缓存加载时 load 事件不会被触发）。页面第一次加载时，pageshow 事件紧随着 load 事件之后触发。pageshow 使用一个布尔类型属性名为 persisted，在初始化加载时它的值为 false。当页面并非初始化加载时，它的值为 true（话句话说，当页面被缓存时它的值为 true）。

2. pagehide 事件

如果你想在用户导航离开页面时定义一些行为，但你不想使用 unload 事件（这会导致页面不会被缓存），你可以使用新的 pagehide 事件。与 pageshow 事件相同，pagehide 事件也使用一个布尔类型属性名为 persisted。如果页面没有被缓存，该属性的值为 false，如果页面被缓存，该属性的值为 true。当该属性的值为 false 时，unload 事件处理器进行处理，反之，pagehide 事件会在 unload 事件触发后立即触发。

四、实际业务相关

1. 业务背景简述

第一个网页提供根据城市提供服务种类列表，假定为 catePage。点击其中一种服务种类将跳转至该服务种类下的详细服务列表，假定为 servicePage。其中在 servicePage 中可以切换城市，业务要求在 servicePage 切换城市返回到 catePage 时要求刷新该页面的城市信息。如下图所示。

2. 解决方案

解决的思路很简单，当页面处于非初始化加载时，进行相关的进行更新城市信息的操作。

对于使用 bfcache 的浏览器可以添加 pageshow 事件，并结合该事件中的 persisted 属性在对于非初始化加载的情况下进行对城市信息的相关处理。

而对于小米浏览器这样，将每个页面都封装成类似于一个 WebView 的形式的手机，使用 visibilitychange 事件。该事件配合 load 事件能够判断是否为初始化加载，配合 document.hidden 属性能够判断页面显示状态。

参考文章

1. Using Firefox 1.5 caching：https://developer.mozilla.org/en-US/Firefox/Releases/1.5/Using_Firefox_1.5_caching

2. 浏览器前进/后退缓存（BF Cache）： http://harttle.land/2017/03/12/backward-forward-cache.html

3. Can I use：https://caniuse.com/#search=pageshow

浏览器的 bfcache 特性的更多相关文章

  1. 浏览器对HTML5特性检測工具Modernizr

    近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...

  2. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

  3. 第四节：教你如何快速让浏览器兼容ES6特性

    写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...

  4. 解决浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  5. 解决让浏览器兼容ES6特性

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  6. JavaScript快速检测浏览器对CSS3特性的支持情况

    项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...

  7. JS-让浏览器兼容ES6特性

    babel:将 ES6 翻译为 ES5 PS:ie 还不支持 import 和 export 还是用 gulp 打包一下吧

  8. 前端工具-让浏览器兼容ES6特性

    babel:将ES6翻译为ES5 问题: 可以处理import和export么? 不能,还是用Rollup或者webpack打包一下吧 可以处理Promise么? 不能,还是使用babel-plugi ...

  9. 各大浏览器内核特性及对应的Browserhacks举例

    1.浏览器内核指的是什么? 简化的浏览器=用户界面+渲染引擎+js解析引擎+数据存储+网络部件 而通常所说的浏览器内核指的是页面渲染引擎(rendering engine). 2.渲染引擎 The r ...

随机推荐

  1. 异步式I／O与实践式编程

    阻塞 线程在执行中如果遇到磁盘读写或网络通信(统称为I/O操作)通常要消耗很长时间 这时操作系统会剥夺这个线程的CPU控制权,使其暂停执行,同时将资源让给其他工作线程 异步I/O 非阻塞IO 针对所有 ...

  2. background:url() 背景图不显示

    奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...

  3. scrapy_数据收集

    什么是数据收集器? 数据以key/value形式存在,收集一些状态,简化数据收集的状态 计算到底发送了多少request等等统计信息 如何对404页面进行设置? 通过response.status等于 ...

  4. linkin大话设计模式--门面模式

    linkin大话设计模式--门面模式 随着系统的不断改进和开发,他们会变得越来越复杂,系统会生成大量的类,这使得程序的流程更加难以理解.门面模式可以为这些类提供一个简易的接口,从而简化访问这些类的复杂 ...

  5. jdk源码->集合->ArrayList

    类的属性 public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomA ...

  6. java数组基础

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  7. awk之FIELDWIDTHS字段宽度

    $ cat file 1234567890 $ awk -vFIELDWIDTHS="1 2 3 4 5" -vOFS="|" 'NF=NF' file 1|2 ...

  8. C#基础(三)--运算符及条件控制语句

    上一章我们了解了C#的一些数据基本类型.如何定义使用变量及类型之间的相互转换.可能大家会发现程序只能按照我们的要求从上向下这样顺序一条一条的执行. 那么程序能按照我们的要求,当某个条件成立的时候才执行 ...

  9. 19_Python元组总结

    元组 1 元组:不可变的容器,一旦初始化就不能更改,有索引:可以查,不能增,改,删除单个元素:可遍历,不能排序 2 当元组元素,只有一个的时候,需要在元素后加",",否则回当()运 ...

  10. maven项目引入sqljdbc4 找不到包的完美 解决方案。

    今天碰到了这个问题,解决了,顺便做一下记录.首先来 重现 一下这个问题,maven install报错,说 找不到这个包,但是其实 我已经安装了. 我们 再来 看看 maven本地仓库里面有 什么,这 ...