以前在 Vue 的项目用了 nprogress 这个插件，一直对于其如何得知加载进度充满好奇，最近又看到了「前端如何实现页面加载进度条」这个问题，今天周六恰好一探究竟。以下仅为一家之言，如有异议，欢迎指出。

前端的页面加载进度条有两种

首先不得不说，前端的页面加载进度条其实有两种，所以你得先搞清楚说的是哪一种。

第一种，进度条显示的是 前端静态资源 的加载。比如你打开一个页面，页面需要加载 js、css、img 等静态资源，那么每加载完一个资源（监听 onload 事件或者类似事件），进度条就向前滚动一下，直到加载完所有，进度条到头。

实际操作中，如果不做前置静态资源配置，基本不可能实现，因为你很难在代码中获取页面加载所需要的 js、css、img 资源，假设可以获取，还需要监听它们的 onload 事件，即使能实现这个进度条，也是一件 性价比很低 的事情，除非一个情况。

没错，这个特殊情况就是 游戏资源的加载。我们在写游戏的时候，通常需要把静态资源项目都列出来到配置中，而且，这个资源请求，一般比较耗时，这个时候，我们就需要这样一个进度条，因为前置条件也已经满足（资源已经列出），而如果只是写一个普通的页面，我们一般不会手动去列出静态资源。（具体实现我没有研究过，实际可能更加复杂，详见这个回答）

第二种情况，也是我们现在通常说的进度条加载，举个简单的例子，GitHub 中就有用到。先打开我的 GitHub 主页 https://github.com/hanzichi，然后点击 tab 中的 Stars 标签，这个时候 url 会变成 https://github.com/hanzichi?tab=stars，进度条开始加载，当页面内容切换过去的时候，进度条结束。

以上实现，其实就是 pjax 的实现，忽略掉 "p" 的部分，其实就是一个普通的 ajax。当页面发起 ajax 请求的时候，显示进度条，ajax 结束的时候，进度条到头，从而实现整个页面加载。这种情况，其实通常都会搭档 SPA 出现。

NProgress

以上第二种情况，业界有个成熟的插件 NProgress。它的 API 非常简单，NProgress.start() 表示进度条开始，NProgress.done() 表示进度条结束。

如果搭配 pjax，可以这样用：

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });

在 Vue 中，可以这样用：

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done() // 结束 Progress
})

甚至，普通的页面中也可以用，页面开始的时候 NProgress.start()，window.onload 的回调中运行 NProgress.done()

NProgress.start() 和 NProgress.done() 过程中，进度条会不断加载，时快时慢，这个速度的控制，依赖的是什么？答案是，进度条的进度其实是假的，进度是 NProgress 自己在代码中控制的。

我们可以看下源码，调用 NProgress.start 后，会持续调用 NProgress.inc 方法，我们看下这个方法实现：

NProgress.inc = function(amount) {
  var n = NProgress.status;

  if (!n) {
    return NProgress.start();
  } else if(n > 1) {
    return;
  } else {
    if (typeof amount !== 'number') {
      if (n >= 0 && n < 0.2) { amount = 0.1; }
      else if (n >= 0.2 && n < 0.5) { amount = 0.04; }
      else if (n >= 0.5 && n < 0.8) { amount = 0.02; }
      else if (n >= 0.8 && n < 0.99) { amount = 0.005; }
      else { amount = 0; }
    }

    n = clamp(n + amount, 0, 0.994);
    return NProgress.set(n);
  }
};

代码中的 amount 就是进度条增量（0 为进度条起始值，1 为进度条终止值），可以从数值上判断，进度条增长速度是越来越慢。当进度条增长到 99.4% 的时候，就停止了，直到调用 NProgress.done() 方法。

其实，某些场景，想获取真实进度也是可以的，xhr2 其实是可以获取进度的，用 ajax 上传文件就可以持续获取进度进行展示，本文就不展开讨论了。

本文的结论是，绝大多数情况下看到的前端页面进度条展示，都是假的，只是特效 ...

浅谈前端实现页面加载进度条以及 nprogress.js 的实现

前端的页面加载进度条有两种

NProgress

猜你喜欢