網頁的加載速度一直是網站優化中非常重要的一環。一個快速的加載速度可以提高用戶的滿意度，增加網站的轉化率，降低用戶流失率。其中JavaScript是網頁中常用的腳本語言。在JavaScript中，如何控制網頁的加載進度呢？

在JavaScript中，可以使用XMLHttpRequest對象來監控網頁的加載進度。每當一個新的資源被加載時，都會觸發XHR對象的progress事件，該事件會返回一個包含了當前資源加載狀態的ProgressEvent對象。其中，該對象有三個屬性與加載進度相關，分別是loaded（已加載的字節數）、total（需要加載的字節數）和lengthComputable（是否可以計算加載進度）。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com');
xhr.onprogress = (event) =>{
if(event.lengthComputable){
console.log(event.loaded, event.total);
}
}
xhr.send();

使用XMLHttpRequest對象可以監控網頁中特定資源的加載進度，但如果要監聽整個網頁的進度，就需要結合瀏覽器提供的onload和onerror事件。當網頁中的所有資源都加載成功時，onload事件會被觸發；當其中任何一個資源加載失敗，則會觸發onerror事件。我們可以在這兩個事件中分別更新進度條。

const imgList = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let count = 0;
imgList.forEach((src) =>{
const img = new Image();
img.onload = () =>{
count++;
updateProgress(count, imgList.length);
}
img.onerror = () =>{
count++;
updateProgress(count, imgList.length);
}
img.src = src;
});
function updateProgress(count, total){
const percent = count/total*100;
console.log(percent + '%');
// update progress bar
}

另外，HTML5還提供了一種新的形式來監聽整個網頁的加載進度——Performance API。該API可以提供關于網頁性能的非常詳細的信息，包括DNS解析、TCP鏈接、服務器響應、DOM構建、資源加載、腳本執行、樣式計算等等。我們可以通過對這些信息的處理，來計算整個網頁的加載進度。

const homepage = window.performance.getEntriesByType('navigation')[0];
const dnsTime = homepage.domainLookupEnd - homepage.domainLookupStart;
const tcpTime = homepage.connectEnd - homepage.connectStart;
const requestTime = homepage.responseEnd - homepage.requestStart;
const domLoadTime = homepage.domContentLoadedEventEnd - homepage.domContentLoadedEventStart;
const loadTime = homepage.loadEventEnd - homepage.loadEventStart;
const totalTime = dnsTime + tcpTime + requestTime + domLoadTime + loadTime;
const totalSize = homepage.transferSize;
const speed = totalSize / totalTime;
console.log(speed);
// 計算進度條

綜上所述，我們可以通過三種方式來監聽JavaScript網頁的加載進度：使用XMLHttpRequest對象來監控特定資源的進度、結合onload和onerror事件來監聽整個網頁的進度、通過Performance API來獲取更詳細的性能信息。只有掌握了這些技術，才能更好地優化網站的加載速度，提高用戶體驗。