浏览器往返缓存（Back/Forward cache）问题的分析与解决

谁借莪１个温暖的怀抱￠ 2022-01-31 16:39 681阅读 0赞

### 什么是往返缓存（Back/Forward cache） ###

往返缓存（`Back/Forward cache`，下文中简称`bfcache`）是浏览器为了在用户页面间执行前进后退操作时拥有更加流畅体验的一种策略。该策略具体表现为，当用户前往新页面时，将当前页面的浏览器DOM状态保存到`bfcache`中；当用户点击后退按钮的时候，将页面直接从`bfcache`中加载，节省了网络请求的时间。

但是`bfcache`的引入，导致了很多问题。下面，举一个我们遇到的场景：

![1547517954654053.jpg][]

页面A是一个任务列表，用户从A页面选择了“任务1：看新闻”，点击“去完成”跳转到B页面。当用户进入B页面后，任务完成。此时用户点击回退按钮，会回退到A页面。此时的A页面“任务1：看新闻”的按钮，应该需要标记为“已完成”，由于`bfcache`的存在，当存入`bfcache`时，“任务1”的按钮是“去完成”，所以此时回来，按钮也是“去完成”，而不会标记为“已完成”。

既然bug产生了，我们该如何去解决它？很多文章都会提到`unload`事件，但是我们实际进行了测试发现并不好用。于是，为了解决问题，我们的`bfcache`探秘之旅开始了。

### bfcache 探秘 ###

在检索`page cache in chromium`的时候，我们发现了这个issue：  
  
https://bugs.chromium.org/p/chromium/issues/detail?id=229605 。里面提到 chromium（chrome的开源版本）在很久以前就已经将`PageCache`（即`bfcache`）这部分代码移除了。也就是说现在的chrome应该是没有这个东西的。可以确定的是，chrome以前的版本中，`bfcache`的实现是从`webkit`中拿来的，加上我们项目目前面向的用户主体就是 iOS + Android，iOS下是基于Webkit，Android基于chrome（且这部分功能也是源于webkit）。因此追溯这个问题，我们只要专注于研究`webkit`里`bfcache`的逻辑即可。

同样通过上文中描述的commit记录，我们也很快定位到了`PageCache`相关逻辑在Webkit中的位置：[webkit/Source/WebCore/history/PageCache.cpp][webkit_Source_WebCore_history_PageCache.cpp]。

该文件中包含的两个方法引起了我们的注意：`canCachePage`和`canCacheFrame`。这里的`Page`即是我们通常理解中的“网页”，而我们也知道网页中可以嵌套`<frame>`、`<iframe>`等标签来置入其他页面。所以，`Page`和`Frame`的概念就很明确了。而在`canCachePage`方法中，是调用了`canCacheFrame`的，如下：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> // 给定 page 的 mainFrame 被传入了 canCacheFrame bool isCacheable = canCacheFrame(page.mainFrame(), diagnosticLoggingClient, indentLevel + 1); </td> 
 </tr> 
 </tbody> 
</table>

源代码链接：[webkit/Source/WebCore/history/PageCache.cpp][webkit_Source_WebCore_history_PageCache.cpp 1]

因此，重头戏就在`canCacheFrame`了。

`canCacheFrame`方法返回的是一个布尔值，也就是其中变量`isCacheable`的值。那么，`isCacheable`的判断策略是什么？更重要的，这里面的策略，有哪些是我们能够利用到的。

注意到这里的代码：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> Vector&lt;ActiveDOMObject*&gt; unsuspendableObjects; if (frame.document() &amp;&amp; !frame.document()-&gt;canSuspendActiveDOMObjectsForDocumentSuspension(&amp;unsuspendableObjects)) { &nbsp;&nbsp;&nbsp;&nbsp;// do something... &nbsp;&nbsp;&nbsp;&nbsp;isCacheable = false; } </td> 
 </tr> 
 </tbody> 
</table>

源代码链接：[webkit/Source/WebCore/history/PageCache.cpp][webkit_Source_WebCore_history_PageCache.cpp 2]

很明显`canSuspendActiveD``OMObjectsForDocumentSuspension`是一个非常重要的方法，该方法中的重要信息见如下代码：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </td> 
 <td> bool ScriptExecutionContext::canSuspendActiveDOMObjectsForDocumentSuspension(Vector&lt;ActiveDOMObject*&gt;* unsuspendableObjects) { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;// something here... &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;bool canSuspend = true; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;// something here... &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;// We assume that m_activeDOMObjects will not change during iteration: canSuspend &nbsp;&nbsp;&nbsp;&nbsp;// functions should not add new active DOM objects, nor execute arbitrary JavaScript. &nbsp;&nbsp;&nbsp;&nbsp;// An ASSERT_WITH_SECURITY_IMPLICATION or RELEASE_ASSERT will fire if this happens, but it's important to code &nbsp;&nbsp;&nbsp;&nbsp;// canSuspend functions so it will not happen! &nbsp;&nbsp;&nbsp;&nbsp;ScriptDisallowedScope::InMainThread scriptDisallowedScope; &nbsp;&nbsp;&nbsp;&nbsp;for (auto* activeDOMObject : m_activeDOMObjects) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!activeDOMObject-&gt;canSuspendForDocumentSuspension()) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;canSuspend = false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// someting here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;// something here... &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;return canSuspend; } </td> 
 </tr> 
 </tbody> 
</table>

源代码链接：[webkit/Source/WebCore/dom/ScriptExecutionContext.cpp][webkit_Source_WebCore_dom_ScriptExecutionContext.cpp]

在这一部分，可以看到他调用每一个 `ActiveDOMObject` 的 `canSuspendForDocumentSuspension` 方法，只要有一个返回了`false`，`canSuspend`就会是`false`（Suspend这个单词是挂起的意思，也就是说存入`bfcache`对于浏览器来说就是把页面上的`frame`挂起了）。

接下来，关键的`ActiveDOMObject`定义在：[webkit/Source/WebCore/dom/ActiveDOMObject.h][webkit_Source_WebCore_dom_ActiveDOMObject.h] ，该文件这部分注释，已经告诉了我们最想要的信息。

> The canSuspendForDocumentSuspension() function is used by the caller if there is a choice between suspending and stopping. For example, a page won’t be suspended and placed in the back/forward cache if it contains any objects that cannot be suspended.

`canSuspendForDocumentSuspension` 用于帮助函数调用者在“挂起（suspending）”与“停止”间做出选择。例如，一个页面如果包含任何不能被挂起的对象的话，那么它就不会被挂起并放到`PageCache`中。

接下来，我们要找的就是，哪些对象是不能被挂起的？在`WebCore`目录下，搜索包含`canSuspendForDocumentSuspension() const`关键字的`.cpp`文件，能找到48个结果。大概看了一下，最好用的`objects that cannot be suspended`应该就是`Worker`对象了，见代码：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> bool Worker::canSuspendForDocumentSuspension() const { &nbsp;&nbsp;&nbsp;&nbsp;// 这里其实是有一个 FIXME 的，看来 webkit 团队也觉得直接 return false 有点简单粗暴。 &nbsp;&nbsp;&nbsp;&nbsp;// 不过还是等哪天他们真的修了再说吧 &nbsp;&nbsp;&nbsp;&nbsp;// FIXME: It is not currently possible to suspend a worker, so pages with workers can not go into page cache. &nbsp;&nbsp;&nbsp;&nbsp;return false; } </td> 
 </tr> 
 </tbody> 
</table>

源代码链接：[webkit/Source/WebCore/workers/Worker.cpp][webkit_Source_WebCore_workers_Worker.cpp]

### 解决方案 ###

业务上添加如下代码：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> // disable bfcache try { &nbsp;&nbsp;&nbsp;&nbsp;var bfWorker = new Worker(window.URL.createObjectURL(new Blob(['1']))); &nbsp;&nbsp;&nbsp;&nbsp;window.addEventListener('unload', function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 这里绑个事件，构造一个闭包，以免 worker 被垃圾回收导致逻辑失效 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bfWorker.terminate(); &nbsp;&nbsp;&nbsp;&nbsp;}); } catch (e) { &nbsp;&nbsp;&nbsp;&nbsp;// if you want to do something here. } </td> 
 </tr> 
 </tbody> 
</table>

### Thanks to ###

*  \[@luyuan\](https://github.com/luyuan)
 *  \[@junmer\](https://github.com/junmer)
 *  \[@jiangjiu\](https://github.com/jiangjiu)
 *  \[@zhanfang\](https://github.com/zhanfang)

[1547517954654053.jpg]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547517954654053.jpg
[webkit_Source_WebCore_history_PageCache.cpp]: https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/history/PageCache.cpp
[webkit_Source_WebCore_history_PageCache.cpp 1]: https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/history/PageCache.cpp#L199
[webkit_Source_WebCore_history_PageCache.cpp 2]: https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/history/PageCache.cpp#L150
[webkit_Source_WebCore_dom_ScriptExecutionContext.cpp]: https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/dom/ScriptExecutionContext.cpp#L225
[webkit_Source_WebCore_dom_ActiveDOMObject.h]: https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/dom/ActiveDOMObject.h#L46
[webkit_Source_WebCore_workers_Worker.cpp]: https://github.com/WebKit/webkit/blob/0fce2cb9b2fd61f9f249f09a14b40ac163ab16c6/Source/WebCore/workers/Worker.cpp#L144