前言最近在做网站体验优化的时候，突然发现一个好东西，pace.js（加载进度条插件），gzip后只有几kb，简单好用，特地分享出来，也作为自己学习的总结。pace.js介绍pace.js是一个自动加载页面进度条的小插件，它可以自动监测你的Ajax请求、事件循环滞后、文档就绪状态和页面上的元素来判断进度。也可以在ajax导航上进行监控，也可以方便的集成到Wordpress中，例如：官网地址：pace.js下面是pace提供的几个例子。当然，我们也可以很方便地在它的基础上，修改成更加个性化的加载进度样式。由于官网文档都是英文写的，所以在接下来的介绍中我会尽量用自己的语言来介绍它的使用过程。一、配置介绍Pace是全自动的，无需配置即可上手。如果我们想做一些调整，请按照以下步骤操作：我们可以在导入文件之前设置window.paceOptions：paceOptions={//禁用元素sourceelements:false,//仅在正常和ajax导航下显示进度条//noteveryrequestrestartOnRequestAfter:false}你也可以在脚本标签上放置选项：如果你是使用AMD或Browserify，您可以将选项传递给启动：define(['pace'],function(pace){pace.start({document:false});});2.ThemesPace包含很多主题，帮助我们入门。只需包含适当的css文件。关于如何修改css样式，我这里给大家举个例子，其实还是很方便的。如果我们下载某个主题的css：.pace{-webkit-pointer-events:none;指针事件：无；-webkit-用户选择：无；-moz-用户选择：无；user-select:none;}.pace-inactive{display:none;}.pace.pace-progress{background:#29d;位置：固定；z-索引：2000；顶部：0；右：100%；宽度：100%；height:2px;}我们可以直接修改，包括进度条的样式、形状等。3.收集器收集器是收集进度信息的码位。Pace包括四个默认收集器：ajax监视页面元素上的所有ajax请求检查页面上是否存在特定元素同名的配置选项。paceOptions={ajax:false,//禁用document:false,//禁用eventLag:false,//禁用元素:{selectors:['.my-page']}};添加您自己的类paceOptions.extraSources以添加更多多个源。每个源都应该有一个.progress属性，或者.elements属性是一个具有.progress属性的对象列表。Pace将自动处理所有缩放，以便用户可以平滑地看到进度变化。4.元素呈现到屏幕元素是我们确定页面呈现的一种方式。如果我们想使用该信息源（根本不使用），请指定一个或多个选择器。我们可以用逗号分隔选择器，以正确处理错误状态（进度条应该在错误状态下消失），但我们正在寻找的元素可能永远不会出现：paceOptions={elements:{selectors:['.timeline,.timeline-error','.user-profile,.profile-error']}}当每个选择器都匹配到某样东西时，Pace会认为元素测试成功。对于此示例，当存在.timeline或.timeline-error以及存在.user-profile或.profile-error时。5.重启规则大多数用户希望进度条在pushState事件发生时自动重启（通常表示ajax导航正在进行中）。我们可以禁用此功能：paceOptions={restartOnPushState:false}我们还可以在每个持续时间超过xms的ajax请求上重新启动pace。如果我们发出用户不需要知道的ajax请求（例如预缓存），我们需要禁用此功能：paceOptions={restartOnRequestAfter:false}我们可以随时使用Pace.restart()6.APIPace暴露了以下方法：Pace.start：显示进度条并开始更新。如果您不使用AMD或CommonJS，则会自动调用。Pace.restart：显示进度条（如果隐藏），然后从头开始报告进度。每当pushState或replaceState被默认自动调用。Pace.stop：隐藏进度条并停止更新。Pace.track：显式跟踪一个或多个请求，请参考下面的跟踪Pace.ignore：显式忽略一个或多个请求，请参考网站中的以下跟踪应用这里有一个我自己使用的例子，比如我们的在我们自己的脚手架中导入ejs模板：然后我们在项目中引入自己的css，这样我们就可以安心的在我们的react/vue项目中使用了。
