这是最近看到的一个面试题。想一想自己还真不会，于是就研究了一下。。
进度条有很多种，自己感觉下来，自己最喜欢 YouTuBe 的实现方式。样式简约却也美观，增加用户体验的同时对整个网站的布局结构什么的不造成任何影响，确实很完美。
更完美的是：只需要向你的页面引入一个 js 文件就可以实现这个效果
今天介绍的就是这个插件：pacejs
官网： PACEPACE – Automatic page load progress
GitHub： HubSpot/pace
使用方法
到官网下载文件后，你只需要这样就可以了：
引入的 css 文件是 pace 官方提供的进度条样式文件，有十种左右可以选择。
那么问题来了
pacejs 是怎么监控页面的加载进度的呢？？
通过 官方文档 我们可以知道，pacejs 提供四种监控器：Ajax、Elements、Document 和 Event Lag。
1、首先是 document。document 就是我们所熟悉的 HTML 文档节点（代表的就是这个文档）。当我们向服务器请求页面时，document 节点有一个 onreadystatechange 事件，当 document 的 readyState 状态变化时会触发。因为无法准确的知道 document 到底加载了多少百分比，所以就用这个状态来做一个估算。在 pace.js 中将document 的 readyState 的三个状态 UNSENT，LOADING 和 DONE 分别定义为 0%，50% 和 100%。通过监听 document 节点的 readyState 状态变更，形成了 pace.js 的 Document 监控器。
2、接下来是 elements，监听 progressEvent 事件（也就是页面的每个 http 请求，页面中的每一个 img、link、audio 等都需要一个 http 请求）。进度就应该是 ProgressEvent.loaded / ProgressEvent.total（当前进程已经执行的工作量 / 进程正在执行的工作总量）
3、然后是 eventLag。这个不是很明白，有人这样说：
EventLagMonitor 其实只是一个“假的”监视器。它就在那里安静匀速的更新进度，这一小小的措施却带来了不错的用户体验，让用户不会因为加载“卡住了”而慌张。
4、最后是 Ajax。也不懂。。。。。。。
求高手指点。