简单实现网页加载进度条
一、监听静态资源加载情况
可以通过window.performance 对象来监听⻚⾯资源加载进度。该对象提供了各种⽅法来获取资源加载的详细信息。
可以使⽤performance.getEntries() ⽅法获取⻚⾯上所有的资源加载信息。可以使⽤该⽅法来监测每个资源的加载状态，计算加载时间，并据此来实现⼀个资源加载进度条。
下⾯是⼀个简单的实现⽅式：
const resources = window.performance.getEntriesByType('resource');
const totalResources = resources.length;
let loadedResources = 0;resources.forEach((resource) => {if (resource.initiatorType !== 'xmlhttprequest') {// 排除AJAX 请求resource.onload = () => {loadedResources++;const progress = Math.round((loadedResources / totalResources) * 100);updateProgress(progress);};}});}function updateProgress(progress) {// 更新进度条
}
该代码会遍历所有资源，并注册⼀个onload事件处理函数。当每个资源加载完成后，会更新
loadedResources变量，并计算当前的进度百分⽐，然后调⽤updateProgress() 函数来更新进度条。需要注意的是，这⾥排除了AJAX请求，因为它们不属于⻚⾯资源。
当所有资源加载完成后，⻚⾯就会完全加载。
二、实现进度条
⽹⻚加载进度条可以通过前端技术实现，⼀般的实现思路是通过监听浏览器的⻚⾯加载事件和资源加
载事件，来实时更新进度条的状态。下⾯介绍两种实现⽅式。
- 使⽤原⽣进度条
在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', () => {Math.floor((document.readyState / 4) * 100);progressBar.value = progress;});
- 使⽤第三⽅库
使⽤第三⽅库可以更加⽅便地实现⽹⻚加载进度条，下⾯以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请求的进度条等等。