網(wǎng)頁(yè)的加載速度一直是網(wǎng)站優(yōu)化中非常重要的一環(huán)。一個(gè)快速的加載速度可以提高用戶的滿意度，增加網(wǎng)站的轉(zhuǎn)化率，降低用戶流失率。其中JavaScript是網(wǎng)頁(yè)中常用的腳本語(yǔ)言。在JavaScript中，如何控制網(wǎng)頁(yè)的加載進(jìn)度呢？

在JavaScript中，可以使用XMLHttpRequest對(duì)象來監(jiān)控網(wǎng)頁(yè)的加載進(jìn)度。每當(dāng)一個(gè)新的資源被加載時(shí)，都會(huì)觸發(fā)XHR對(duì)象的progress事件，該事件會(huì)返回一個(gè)包含了當(dāng)前資源加載狀態(tài)的ProgressEvent對(duì)象。其中，該對(duì)象有三個(gè)屬性與加載進(jìn)度相關(guān)，分別是loaded（已加載的字節(jié)數(shù)）、total（需要加載的字節(jié)數(shù)）和lengthComputable（是否可以計(jì)算加載進(jìn)度）。

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對(duì)象可以監(jiān)控網(wǎng)頁(yè)中特定資源的加載進(jìn)度，但如果要監(jiān)聽整個(gè)網(wǎng)頁(yè)的進(jìn)度，就需要結(jié)合瀏覽器提供的onload和onerror事件。當(dāng)網(wǎng)頁(yè)中的所有資源都加載成功時(shí)，onload事件會(huì)被觸發(fā)；當(dāng)其中任何一個(gè)資源加載失敗，則會(huì)觸發(fā)onerror事件。我們可以在這兩個(gè)事件中分別更新進(jìn)度條。

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還提供了一種新的形式來監(jiān)聽整個(gè)網(wǎng)頁(yè)的加載進(jìn)度——Performance API。該API可以提供關(guān)于網(wǎng)頁(yè)性能的非常詳細(xì)的信息，包括DNS解析、TCP鏈接、服務(wù)器響應(yīng)、DOM構(gòu)建、資源加載、腳本執(zhí)行、樣式計(jì)算等等。我們可以通過對(duì)這些信息的處理，來計(jì)算整個(gè)網(wǎng)頁(yè)的加載進(jìn)度。

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);
// 計(jì)算進(jìn)度條

綜上所述，我們可以通過三種方式來監(jiān)聽JavaScript網(wǎng)頁(yè)的加載進(jìn)度：使用XMLHttpRequest對(duì)象來監(jiān)控特定資源的進(jìn)度、結(jié)合onload和onerror事件來監(jiān)聽整個(gè)網(wǎng)頁(yè)的進(jìn)度、通過Performance API來獲取更詳細(xì)的性能信息。只有掌握了這些技術(shù)，才能更好地優(yōu)化網(wǎng)站的加載速度，提高用戶體驗(yàn)。