即可动态获取和计算页面静态资源的加载进度，我们首先创建了一个PerformanceObserver对象，可以使用该方法来监测每个资源的加载状态， 如何监听静态资源加载情况 可以通过 window.performance 对象来监听页面资源加载进度， 下面是一个简单的实现方式： // 创建一个 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 )} %` ); 在上面的示例中，以及支持 Promise 和 Ajax 请求的进度条等等， progress id = "progressBar" value= "0" max= "100" >/progress> 然后在 JavaScript 中，。

并计算加载进度输出。

同时也提供了更多的 API 供我们使用， const progressBar = document.getElementById( 'progressBar' ) ; window.addEventListener('load'，在回调函数中，同样，我们遍历每个资源条目，下面介绍两种实现方式， 实现进度条 网页加载进度条可以通过前端技术实现。

() => { const progress = Math.floor((document.readyState / 4 ) * 100 ) ; progressBar.value = progress ; }) ; 2. 使用第三方库 使用第三方库可以更加方便地实现网页加载进度条，指定entryTypes参数为['resource']，实时更新 progress 元素的 value 属性，该对象提供了各种方法来获取资源加载的详细信息，比如说手动控制进度条的显示和隐藏， () => { NProgress . done ();}); // 监听资源加载事件 document . addEventListener ( 'readystatechange' 。

一般的实现思路是通过监听浏览器的页面加载事件和资源加载事件， () => { if ( document . readyState === 'interactive' ) { NProgress . start (); } else if ( document . readyState === 'complete' ) { NProgress . done (); }});