前言

最近做網(wǎng)站體驗(yàn)優(yōu)化的時(shí)候突然發(fā)現(xiàn)一個(gè)好東西，pace.js(加載進(jìn)度條插件)，gzip之后只有幾kb， 簡單好用，特地分享出來，也作為自己的一個(gè)學(xué)習(xí)總結(jié)。

pace.js介紹

pace.js是一個(gè)自動(dòng)加載頁面進(jìn)度欄的小插件,它可以自動(dòng)監(jiān)視您的Ajax請求，事件循環(huán)滯后，文檔就緒狀態(tài)以及頁面上的元素來確定進(jìn)度。在ajax導(dǎo)航上，它也能進(jìn)行監(jiān)聽,同時(shí)他也可以很方便的集成到Wordpress中,例如:

官網(wǎng)地址: pace.js下面來展示幾個(gè)pace提供的幾個(gè)例子,當(dāng)然我們也可以很方便的基于它去修改成更加定制化的加載進(jìn)度樣式.

由于官網(wǎng)文檔是用全英文寫的,所以我在接下的介紹中會(huì)盡量用自己的額語言來向大家介紹其使用過程.

1.配置介紹

Pace是全自動(dòng)的，無需進(jìn)行配置即可上手。如果我們想進(jìn)行一些調(diào)整，請按以下步驟操作：我們可以window.paceOptions在導(dǎo)入文件之前進(jìn)行設(shè)置：

paceOptions = {
  // 禁用元素源
  elements: false,

  // 只在常規(guī)下和ajax導(dǎo)航下展示進(jìn)度條
  // not every request
  restartOnRequestAfter: false
}

您還可以在腳本標(biāo)簽上放置選項(xiàng)：

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

如果你使用的是AMD或Browserify，則可以將選項(xiàng)傳遞給start：

define(['pace'], function(pace){
  pace.start({
    document: false
  });
});

2.主題

Pace包含許多主題 ，可幫助我們?nèi)腴T。只要包括適當(dāng)?shù)腸ss文件。關(guān)于如何修改css樣式,我在這里給大家舉個(gè)例子,其實(shí)也很方便,如果我們下載了某個(gè)主題的css:

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

我們就可以直接修改它,包括進(jìn)度條的樣式,形狀等等.

3.收集器

收集器是收集進(jìn)度信息的代碼位。Pace包括四個(gè)默認(rèn)收集器：

• ajax 監(jiān)視頁面上的所有ajax請求
• element 檢查頁面上是否存在特定元素
• Document 檢查文件readyState
• Event Lag 檢查事件循環(huán)滯后信號(hào)，表明正在執(zhí)行javascript

可以通過相同名稱的配置選項(xiàng)分別配置或禁用它們。

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

添加自己的類paceOptions.extraSources以添加更多源。每個(gè)源都應(yīng)該具有一個(gè).progress屬性，或者.elements是具有.progress屬性的對象列表的 屬性。Pace將自動(dòng)處理所有縮放，以使進(jìn)度更改對用戶而言看起來很平滑。

4.元素

呈現(xiàn)到屏幕上的元素是我們確定頁面呈現(xiàn)的一種方法。如果我們想使用該信息源(根本不需要)，請指定一個(gè)或多個(gè)選擇器。我們可以使用逗號(hào)分隔選擇器，以正確處理錯(cuò)誤狀態(tài)(進(jìn)度條應(yīng)消失在錯(cuò)誤狀態(tài))，但我們尋找的元素可能永遠(yuǎn)不會(huì)出現(xiàn)：

paceOptions = {
  elements: {
    selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
  }
}

當(dāng)每個(gè)選擇器匹配某項(xiàng)時(shí)，Pace都會(huì)認(rèn)為元素測試成功。對于此示例，當(dāng).timeline或.timeline-error存在時(shí)以及.user-profile 或.profile-error存在時(shí)。

5.重新啟動(dòng)規(guī)則

大多數(shù)用戶希望進(jìn)度欄在pushState事件發(fā)生時(shí)自動(dòng)重新啟動(dòng)(通常表示正在進(jìn)行ajax導(dǎo)航)。我們可以禁用此功能：

paceOptions = {
  restartOnPushState: false
}

我們還可以對持續(xù)時(shí)間超過x ms的每個(gè)ajax請求重新啟動(dòng)步速。如果我們發(fā)出用戶不需要知道的ajax請求(例如預(yù)緩存)，則需要禁用此功能：

paceOptions = {
  restartOnRequestAfter: false
}

我們隨時(shí)可以通過以下方式手動(dòng)觸發(fā)重新啟動(dòng)

Pace.restart()

6.API

Pace公開以下方法：

• Pace.start：顯示進(jìn)度條并開始更新。如果您不使用AMD或CommonJS，則會(huì)自動(dòng)調(diào)用。
• Pace.restart：顯示進(jìn)度條(如果已隱藏)，然后從頭開始報(bào)告進(jìn)度。每當(dāng)pushState或replaceState默認(rèn)情況下被自動(dòng)調(diào)用。
• Pace.stop：隱藏進(jìn)度條并停止對其進(jìn)行更新。
• Pace.track：明確跟蹤一個(gè)或多個(gè)請求，請參閱下面的跟蹤
• Pace.ignore：明確忽略一個(gè)或多個(gè)請求，請參見下面的跟蹤

在網(wǎng)站中的應(yīng)用

這里舉個(gè)我自己使用的例子,比如我們在自己的腳手架中的ejs模板中導(dǎo)入:

然后我們再在項(xiàng)目中引入自己的css,這樣我們就能安心的在我們的react/vue項(xiàng)目中使用了.