如何实现网页加载进度条？如何监听静态资源加载情况可以通过 window.performance 对象来监听页面资源加载

如何监听静态资源加载情况

可以通过 window.performance 对象来监听页面资源加载进度，才是最关键的一步。该对象提供了各种方法来获取资源加载的详细信息。

可以使用 performance.getEntries() 方法获取页面上所有的资源加载信息。可以使用该方法来监测每个资源的加载状态，计算加载时间，并据此来实现一个资源加载进度条。

下面是一个简单的实现方式：

// 创建一个 PerformanceObserver 对象
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();

  let totalBytes = 0;
  let loadedBytes = 0;

  // 遍历资源条目
  for (const entry of entries) {
    // 获取资源的总大小和已加载大小
    totalBytes += entry.transferSize;
    loadedBytes += entry.encodedBodySize || entry.decodedBodySize;
  }

  // 计算加载进度
  const progress = loadedBytes / totalBytes * 100;
  console.log(`静态资源加载进度：${progress.toFixed(2)}%`);
});

// 开始监听资源条目
observer.observe({ entryTypes: ['resource'] });

// 获取页面加载过的资源
const resources = window.performance.getEntriesByType('resource');

let totalBytes = 0;
let loadedBytes = 0;

// 遍历资源条目
for (const resource of resources) {
  // 获取资源的总大小和已加载大小
  totalBytes += resource.transferSize;
  loadedBytes += resource.encodedBodySize || resource.decodedBodySize;
}

// 计算加载进度
const progress = loadedBytes / totalBytes * 100;
console.log(`静态资源加载进度：${progress.toFixed(2)}%`);

在上面的示例中，我们首先创建了一个PerformanceObserver对象，并通过其构造函数中的回调函数来处理资源条目。在回调函数中，我们遍历每个资源条目，并累加资源的总大小和已加载大小。

然后，我们根据累加的总大小和已加载大小计算加载进度，将其通过console.log()输出。

接下来，我们调用observe方法开始监听资源条目，指定entryTypes参数为['resource']，表示只监听资源类型的条目。

最后，我们使用window.performance.getEntriesByType('resource')获取页面加载过的所有资源，并遍历资源条目。同样，累加资源的总大小和已加载大小，并计算加载进度输出。

通过上述代码，即可动态获取和计算页面静态资源的加载进度。

实现进度条

网页加载进度条可以通过前端技术实现，一般的实现思路是通过监听浏览器的页面加载事件和资源加载事件，来实时更新进度条的状态。下面介绍两种实现方式。

1. 使用原生进度条

在 HTML5 中提供了 progress 元素，可以通过它来实现一个原生的进度条。

<progress id="progressBar" value="0" max="100"></progress>

然后在 JavaScript 中，监听页面加载事件和资源加载事件，实时更新 progress 元素的 value 属性。

const progressBar = document.getElementById('progressBar');

window.addEventListener('load', () => {
  progressBar.value = 100;
});

document.addEventListener('readystatechange', () => {
  const progress = Math.floor((document.readyState / 4) * 100);
  progressBar.value = progress;
});

2. 使用第三方库

使用第三方库可以更加方便地实现网页加载进度条，下面以 nprogress 库为例：

安装 nprogress 库

bashCopy codenpm install nprogress --save

在页面中引入 nprogress.css 和 nprogress.js

<link rel="stylesheet" href="/node_modules/nprogress/nprogress.css">
<script src="/node_modules/nprogress/nprogress.js"></script>

在 JavaScript 中初始化 nprogress 并监听页面加载事件和资源加载事件

// 初始化 nprogress
NProgress.configure({ showSpinner: false });

// 监听页面加载事件
window.addEventListener('load', () => {
  NProgress.done();
});

// 监听资源加载事件
document.addEventListener('readystatechange', () => {
  if (document.readyState === 'interactive') {
    NProgress.start();
  } else if (document.readyState === 'complete') {
    NProgress.done();
  }
});

使用 nprogress 可以自定义进度条的样式，同时也提供了更多的 API 供我们使用，比如说手动控制进度条的显示和隐藏，以及支持 Promise 和 Ajax 请求的进度条等等。