以前在 Vue 的项目用了 nprogress 这个插件，一直对于其如何得知加载进度充满好奇，最近又看到了「前端如何实现页面加载进度条」这个问题，今天周六恰好一探究竟。以下仅为一家之言，如有异议，欢迎指出。
前端的页面加载进度条有两种
首先不得不说，前端的页面加载进度条其实有两种，所以你得先搞清楚说的是哪一种。
第一种，进度条显示的是 前端静态资源 的加载。比如你打开一个页面，页面需要加载 js、css、img 等静态资源，那么每加载完一个资源（监听 onload 事件或者类似事件），进度条就向前滚动一下，直到加载完所有，进度条到头。
实际操作中，如果不做前置静态资源配置，基本不可能实现，因为你很难在代码中获取页面加载所需要的 js、css、img 资源，假设可以获取，还需要监听它们的 onload 事件，即使能实现这个进度条，也是一件 性价比很低 的事情，除非一个情况。
没错，这个特殊情况就是 游戏资源的加载。我们在写游戏的时候，通常需要把静态资源项目都列出来到配置中，而且，这个资源请求，一般比较耗时，这个时候，我们就需要这样一个进度条，因为前置条件也已经满足（资源已经列出），而如果只是写