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