pace.js 是頁面加載進度條的 js 插件，它可以自動監控頁面的 ajax 請求，事件循環滯后，文檔准備狀態以及元素是否已出現在頁面上來顯示進度。
使用示例
去官方github倉庫：
https://github.com/HubSpot/pace，下載最新的發布版本。
在自己的頁面引入 pace.js 和主題樣式 css：
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
配置說明
pace.js 是不需要任何配置就可以自動進行監控了。如果要進行自定義配置，將 window.paceOptions 的定義語句放到引入 pace.js 文件的之前即可。
<script> window.paceOptions = { ajax: { trackMethods: ['GET', 'POST'], }, restartOnRequestAfter: false, }; </script> <script src="/pace/pace.js"></script>
上面的配置代碼中的 trackMethods 表示會自動監控 ajax 的 GET 和 POST 的請求方法（默認只監控 GET 請求方法）。
restartOnRequestAfter 設置成 false 表示除頁面導航外禁用 ajax 請求監控。
下面是 pace.js 源碼中的默認配置，供參考：
收集器
pace.js 有 4 種收集器，用來判斷加載進度條的信息。
1.ajax - 監控頁面所有的 ajax 請求
2.elements - 檢查元素是否存在頁面上
3.document - 檢查文檔准備狀態
4.event lag - 檢查事件循環滯后信號，表明正在執行javascript（不好懂）
API
Pace.start()
顯示進度條。一般會自動調用。
Pace.restart()
從頭開始顯示進度條。當pushState或replaceState時默認情況下會自動調用。
Pace.stop()
隱藏進度條並停止更新。
Pace.track()
明確跟蹤一個或多個請求
Pace.ignore()
明確忽略一個或多個請求
事件
Pace 觸發事件包括：
start：開始啟動 pace 時
stop：手動停止 pace 時
restart：重新開始 pace 時（手動或通過新的AJAX請求）
done：pace 已經完成
hide：pace 已經被隱藏（晚於 done 事件，基於 ghostTime 和 minTime 的配置）
可以用 on, off 和 once 方法綁定事件。
Pace.on(event, handler, [context]): 事件被觸發時調用 handler 處理函數
Pace.off(event, [handler]): 解除綁定事件與 handler 處理函數
Pace.once(event, handler, [context]): 事件被觸發時調用 handler 處理函數，事件只會被觸發一次
其它
pace.js 倉庫最后的更新時間是 2017 年，官方在 github 首頁也進行了聲明，不再進行維護。在我的項目中 pace.js 足夠滿足使用了，並且對於這個庫中的 event lag 還需要進一步的學習。
pace.js 官方文檔：
https://github.hubspot.com/pace/
pace.js 官方的樣式：
https://github.hubspot.com/pace/docs/welcome/
pace.js 官方倉庫：
https://github.com/HubSpot/pace