怎么给网站添加进度条

这是最近看到的一个面试题。想一想自己还真不会，于是就研究了一下。。

进度条有很多种，自己感觉下来，自己最喜欢 YouTuBe 的实现方式。样式简约却也美观，增加用户体验的同时对整个网站的布局结构什么的不造成任何影响，确实很完美。

更完美的是：只需要向你的页面引入一个 js 文件就可以实现这个效果

今天介绍的就是这个插件：pacejs

官网： PACEPACE -- Automatic page load progress
GitHub： HubSpot/pace

使用方法

到官网下载文件后，你只需要这样就可以了：

<link rel="stylesheet" href="pace-theme-minimal.css" type="text/css">
<script src="pace.js"></script>

引入的 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 监控器。

XMLHttpRequest.readyState

2、接下来是 elements，监听 progressEvent 事件（也就是页面的每个 http 请求，页面中的每一个 img、link、audio 等都需要一个 http 请求）。进度就应该是 ProgressEvent.loaded / ProgressEvent.total（当前进程已经执行的工作量 / 进程正在执行的工作总量）

ProgressEvent

3、然后是 eventLag。这个不是很明白，有人这样说：

EventLagMonitor 其实只是一个“假的”监视器。它就在那里安静匀速的更新进度，这一小小的措施却带来了不错的用户体验，让用户不会因为加载“卡住了”而慌张。

4、最后是 Ajax。也不懂。。。。。。。

求高手指点。