【前端面试题-19】简单说一下，如果前端页面要做个页面加载进度条，该通过哪些实现进度上的把控

前端页面要实现一个页面加载进度条，可以通过以下步骤进行进度上的把控：

1. HTML结构：

   • 在页面中创建一个用于承载进度条的<div>元素或其他合适的元素，例如：

     <div id="progress-bar">
       <div id="progress"></div>
     </div>
     

   • progress-bar作为进度条的容器，progress则是实际表示进度的部分。

2. CSS样式：

   • 为进度条设置样式，包括背景颜色、高度、过渡动画等，以确保当宽度变化时有平滑的动画效果：

     #progress-bar {
       width: 100%;
       height: 5px;
       background-color: #f0f0f0;
     }
     #progress {
       width: 0%;
       height: 100%;
       background-color: #4caf50;
       transition: width 0.3s ease-in-out;
     }
     

3. JavaScript 控制：

   • 对于整个页面加载进度，由于浏览器本身并不直接提供页面资源加载进度的具体数据，因此模拟整个页面加载进度较为复杂，一般依赖于监听DOMContentLoaded、load事件以及可能的异步资源加载情况（如图片、脚本、Ajax请求等）。

   • 如果仅针对部分可计算加载进度的资源（比如Ajax请求），可以在请求发送时启动进度条，然后在请求响应或完成时更新进度条的宽度，例如：

     var xhr = new XMLHttpRequest();
     xhr.open('GET', 'your-resource-url');
     xhr.onprogress = function(e) {
       if (e.lengthComputable) {
         var percentComplete = e.loaded / e.total * 100;
         document.getElementById('progress').style.width = percentComplete + '%';
       }
     };
     xhr.onloadend = function() {
       // 加载结束时，设置进度条为100%
       document.getElementById('progress').style.width = '100%';
       // 或者执行完成动画后隐藏进度条
       // ...
     };
     xhr.send();
     

   • 对于整体页面加载进度的模拟，可能需要借助第三方库，如上面提到的NProgress，它可以方便地跟踪页面的加载状态并模拟出加载进度。只需调用相关API即可开始、更新和结束进度条：

     NProgress.start();
     window.addEventListener('load', function() {
       // 页面所有资源（包括图片）加载完成后
       NProgress.done();
     });
     

4. 现代Web API：

   • 使用现代浏览器提供的PerformanceObserverAPI可以获取资源加载性能数据，从而更精确地估计页面加载进度，但实现起来更为复杂，需要对资源加载顺序及大小有一定了解，并根据实际情况调整进度计算逻辑。

总结来说，实现页面加载进度条的核心在于获取到加载进度的数据，并通过JavaScript实时更新进度条元素的宽度。对于整页加载进度条，往往需要综合多种加载状态和资源加载监控手段才能较为准确地模拟出来。对于局部加载或异步操作的进度，则可以直接通过特定API获得确切的进度数据。