SPA 遇到 bfcache 所引起的無解閃現

原文地址：monine.github.io/#/article/2…

最近又看 Blog 的裝修不順眼，花了些時間從新裝修了一番，佈局上沒有作啥修改，主要是樣式的調整和新增首頁。過程當中遇到一個難題，並且是無解的難題，如題，與 bfcache 有關，挺偏的一個問題。而且還促使我去 vue-router 源碼探索了一番。

閃現場景

SPA 頁面的切換加入動畫效果，好比使用 animate.css 動畫庫 fadeIn fadeOut。

*** Container.vue ***
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in"> <router-view></router-view> </transition> 複製代碼

假若有 A、B 兩頁面，當前處於 A 頁面，在未滾動頁面狀況下 window.pageYOffset === 0 點擊連接進入 B 頁面，此時滾動 B 頁面任意距離，假如是 300 px window.pageYOffset === 300。再點擊瀏覽器返回按鈕，B 頁面執行 fadeOut 動畫（動畫執行完成以後纔會 destroy），注意！當你點擊瀏覽器返回按鈕的一瞬間，B 頁面會當即滾動（閃現！）到頁面頂部 window.pageYOffset === 0，爲何？由於返回的是 A 頁面，而 A 頁面在退出時的滾動值是 window.pageYOffset === 0。

oh8wftuto.bkt.clouddn.com/spa-bfcache…

上面連接是 gif，掘進圖片只支持 https，有興趣能夠去個人 Blog 參觀參觀

嘗試過的解決方案

1. 設置 overflow: hidden;

*,
*::before,
*::after {
  overflow: hidden;
}
複製代碼

很是簡單粗暴是吧，但是無效。

2. 頁面切換時從新設置 scrollTop 值

window.addEventListener('popstate', () => {
  document.scrollingElement.scrollTop = 300
})
複製代碼

一樣，無效。

3. 抱着試一試的心態嘗試監聽 unload 事件阻止 bfcache；

Working_with_BFCache

window.addEventListener('unload', () => {
  // ...
})
複製代碼

純屬僥倖心理，SPA 頁面間的切換始終只是組件間的切換，頁面不會註銷。

換個思路

正常點擊 router-link 切換頁面不會出現閃現問題，那是否是能夠代理瀏覽器前進、後退行爲呢？也就是說阻止默認的瀏覽器前進、後退行爲，用 router-link 切換頁面的方式執行代理切換。

你可能只知道 event.stopPropagation() 能夠阻止事件向父級和子級傳播，但不知道 event.stopImmediatePropagation() 除了有相同功效以外還能夠阻止事件在兄弟間傳播。這裏阻止默認的瀏覽器前進、後退行爲就須要用到它。

window.addEventListener('popstate', (event) => {
  event.stopImmediatePropagation()
})
複製代碼

而後考慮怎麼實現行爲代理，首先嚐試了 vur-router 提供的編程式導航 router.back() router.forward()。結果發現與瀏覽器默認行爲如出一轍，而後打開 vur-router 源碼一看，發現我好天真。

如下 vue-router 源代碼所有取自 node_modules/vue-router/dist/vue-router.esm.js（開發環境運行代碼）

VueRouter.prototype.go = function go (n) {
  this.history.go(n); // 原來都在你在幹活
};

VueRouter.prototype.back = function back () {
  this.go(-1);
};

VueRouter.prototype.forward = function forward () {
  this.go(1);
};
複製代碼

this.history 是啥？看看 VueRouter 構造函數。

var VueRouter = function VueRouter (options) {
  // ...
  switch (mode) {
    case 'history':
      this.history = new HTML5History(this, options.base);
      break
    case 'hash':
      this.history = new HashHistory(this, options.base, this.fallback); // 使用 hash 模式
      break
    case 'abstract':
      this.history = new AbstractHistory(this, options.base);
      break
    default:
      if (process.env.NODE_ENV !== 'production') {
        assert(false, ("invalid mode: " + mode));
      }
  }
};
複製代碼

再瞧瞧 HashHistory 原型上的 go 方法：

HashHistory.prototype.go = function go (n) {
  window.history.go(n);
};
複製代碼

啪啪，臉好疼...

仍是老老實實模擬點擊 router-link 吧，找到 router-link 的 click 事件。

// router-link click 事件是執行 handler 函數
var handler = function (e) {
  if (guardEvent(e)) { // 事件守衛，好比按住 ctrl 鍵再點擊 router-link 此方法會返回 undefined，而後瀏覽器執行默認行爲：新 tab 打開連接地址。
    if (this$1.replace) {
      router.replace(location);
    } else {
      router.push(location); // location 是 router-link 組件所設置的屬性對象: path params query hash 等
    }
  }
};
複製代碼

VueRouter 原型上的 push 方法

VueRouter.prototype.push = function push (location, onComplete, onAbort) {
  this.history.push(location, onComplete, onAbort); // 上文已提到 this.history 是 HashHistory 實例
};
複製代碼

HashHistory 原型上的 push 方法

HashHistory.prototype.push = function push (location, onComplete, onAbort) {
  var this$1 = this;

  var ref = this;
  var fromRoute = ref.current;
  this.transitionTo(location, function (route) {
    pushHash(route.fullPath); // 使用 history.pushState 方法修改當前 url
    handleScroll(this$1.router, route, fromRoute, false); // vue-router scrollBehavior
    onComplete && onComplete(route);
  }, onAbort);
};
複製代碼

push 方法內調用實例的 transitionTo 方法，發現它是 History 對象原型上的方法，而不是 HashHistory，猜想應該是繼承關係，再次查看 HashHistory 構造函數。

var HashHistory = (function (History$$1) {
  function HashHistory (router, base, fallback) {
    History$$1.call(this, router, base); //
    // check history fallback deeplinking
    if (fallback && checkFallback(this.base)) {
      return
    }
    ensureSlash();
  }
  if ( History$$1 ) HashHistory.__proto__ = History$$1;
  HashHistory.prototype = Object.create( History$$1 && History$$1.prototype );
  HashHistory.prototype.constructor = HashHistory;
  // ...
  return HashHistory;
}(History));
複製代碼

不出所料，一套原型繼承代碼如期所至。其實能夠到 github 上 clone 一套 vue-router 的源碼看看 ES6 語法會更清楚，但我懶...

看看 transitionTo 方法作了什麼

History.prototype.transitionTo = function transitionTo (location, onComplete, onAbort) {
  var this$1 = this;

  var route = this.router.match(location, this.current); // 匹配當前路由信息對象
  this.confirmTransition(route, function () {
    this$1.updateRoute(route);
    onComplete && onComplete(route);
    this$1.ensureURL();

    // fire ready cbs once
    if (!this$1.ready) {
      this$1.ready = true;
      this$1.readyCbs.forEach(function (cb) { cb(route); });
    }
  }, function (err) {
    if (onAbort) {
      onAbort(err);
    }
    if (err && !this$1.ready) {
      this$1.ready = true;
      this$1.readyErrorCbs.forEach(function (cb) { cb(err); });
    }
  });
};
複製代碼

獲取當前路由信息對象以後，又調用 confirmTransition 方法，這個方法纔是真正幹活的方法。

History.prototype.confirmTransition = function confirmTransition (route, onComplete, onAbort) {
    var this$1 = this;

  var current = this.current;
  var abort = function (err) {
    if (isError(err)) {
      if (this$1.errorCbs.length) {
        this$1.errorCbs.forEach(function (cb) { cb(err); });
      } else {
        warn(false, 'uncaught error during route navigation:');
        console.error(err);
      }
    }
    onAbort && onAbort(err);
  };
  if (
    isSameRoute(route, current) &&
    // in the case the route map has been dynamically appended to
    route.matched.length === current.matched.length
  ) {
    this.ensureURL();
    return abort()
  }

  var ref = resolveQueue(this.current.matched, route.matched);
    var updated = ref.updated;
    var deactivated = ref.deactivated;
    var activated = ref.activated;

  var queue = [].concat(
    // in-component leave guards
    extractLeaveGuards(deactivated),
    // global before hooks
    this.router.beforeHooks,
    // in-component update hooks
    extractUpdateHooks(updated),
    // in-config enter guards
    activated.map(function (m) { return m.beforeEnter; }),
    // async components
    resolveAsyncComponents(activated)
  );

  this.pending = route;
  var iterator = function (hook, next) {
    if (this$1.pending !== route) {
      return abort()
    }
    try {
      hook(route, current, function (to) {
        if (to === false || isError(to)) {
          // next(false) -> abort navigation, ensure current URL
          this$1.ensureURL(true);
          abort(to);
        } else if (
          typeof to === 'string' ||
          (typeof to === 'object' && (
            typeof to.path === 'string' ||
            typeof to.name === 'string'
          ))
        ) {
          // next('/') or next({ path: '/' }) -> redirect
          abort();
          if (typeof to === 'object' && to.replace) {
            this$1.replace(to);
          } else {
            this$1.push(to);
          }
        } else {
          // confirm transition and pass on the value
          next(to);
        }
      });
    } catch (e) {
      abort(e);
    }
  };

  runQueue(queue, iterator, function () {
    var postEnterCbs = [];
    var isValid = function () { return this$1.current === route; };
    // wait until async components are resolved before
    // extracting in-component enter guards
    var enterGuards = extractEnterGuards(activated, postEnterCbs, isValid);
    var queue = enterGuards.concat(this$1.router.resolveHooks);
    runQueue(queue, iterator, function () {
      if (this$1.pending !== route) {
        return abort()
      }
      this$1.pending = null;
      onComplete(route);
      if (this$1.router.app) {
        this$1.router.app.$nextTick(function () {
          postEnterCbs.forEach(function (cb) { cb(); });
        });
      }
    });
  });
};
複製代碼

烏央烏央很長一串，細節不作分析，瞭解大概是作什麼。首先明白主角是 queue 對象和 runQueue 方法，顧名思義，就是一個隊列和它的運行器，隊列內都是一些鉤子函數和異步組件。所以能夠大體推測其行爲就是執行與路由相關的生命週期事件，也就是加載和卸載路由相對應的組件，更新頁面顯示內容。

至此，原理和輪廓大體清晰，模擬點擊 router-link 的方式其實早已肯定，router.push(location) 就好了。location 參數如何得到？很簡單，監聽 popstate 方法，執行其回調時當前 url 地址已經變成目標路由地址，截取 hash 部分，調用 router.resolve 方法便可。

當我寫完相關代碼測試時，發現一個致命的錯誤！模擬點擊 router-link 這套方案根本行不通，由於我永遠是往 history 隊列里加入路由，這樣會致使兩個錯誤。

1. 前進按鈕永遠不可點擊
2. 連續點擊兩次返回按鈕則路由錯誤

這是我以前並未考慮到的狀況，仔細一想發現我最開始的想法就不可行。把瀏覽器當前 tab 的 historys 當成一個棧，點擊連接是往棧內壓入新的連接信息，指針指向新壓入的連接信息。後退按鈕只是簡單的把指針指向上一個連接信息，而我模擬點擊 router-link 則是一直在往棧內壓入新的連接信息，錯誤顯而易見。

// 瀏覽器執行後退操做正常行爲
[a, b, c] => [a, b, c] => [a, b, c]
       ^         ^         ^

// 模擬點擊 router-link 執行後退操做
[a, b, c] => [a, b, c, b] => [a, b, c, b, c]
       ^               ^                  ^
複製代碼

心很累，這麼簡單的錯誤我以前竟然沒想到。

另外值得注意的是當執行事後退操做以後，再點擊新的連接則會拋棄棧內當前連接信息之上的全部連接信息，再壓入新的連接信息，並將指針指向新的連接信息。也就是說前進按鈕再也不可點擊，老舊的歷史記錄被刪除。

// 返回到 a 後點擊新的連接 d
[a, b, c] => [a, b, c] => [a, b, c] => [a, d]
       ^         ^         ^               ^
複製代碼

最後

試了這麼多方案，最終仍是沒能找到一個可行方案，且已經黔驢技窮。最後思考的點是：我可以修改瀏覽器的歷史記錄嗎？或者說 BOM 對象有提供修改歷史記錄的接口嗎？