看著瀏覽器的進度條，有時在網頁載入過程中接近尾聲時會變慢，我想知道瀏覽器是否根據尺寸頁面或頁面上存在的元素不。元素還是其他什麼？
也許檢查過 Firefox 或其他瀏覽器原始碼的人更詳細地了解這一點？
答案1
什麼是載入網站？
載入網頁是或多或少就像下載檔案。在大多數情況下，您從伺服器獲得的只是透過 HTTP 傳輸的 HTML 檔案。首先，您向網站的 URL 發出 HTTP 請求，例如GET http://superuser.com。
正如 William Jackson 所說，HTTP 使用Content-Length標題欄位提前顯示該文件的大小。瀏覽器可以透過評估來猜測整個網站的下載進度。
但是，這無法涵蓋 HTML 文件可以透過引用來載入的所有資源。這些可能包括：
- 外部影像
- 外部樣式表
- 外部腳本
- 鏡框
- AJAX 載入
瀏覽器如何知道要載入多少？
現在瀏覽器的任務就是找到這些引用並請求它們。因此，對於每個外部引用，瀏覽器將查閱其緩存，或發送新的 HTTP 請求。對於超級用戶，這將是託管在內容分發網路上的以下文件，以獲得更快的效能：
GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js– 主 jQuery 文件GET http://cdn.sstatic.net/js/stub.js– 一些 JS 函數GET http://cdn.sstatic.net/superuser/all.css– 樣式表- …
當您啟用時間軸追蹤時，您實際上可以使用 Firebug 或 Chrome 的偵錯器看到這一點。這是載入超級用戶的時間線，經過過濾以便僅顯示請求。點擊放大：
正如我們所看到的，主超級用戶網站將花費最長的時間來加載，但是從它開始級聯，也涉及其他頁面加載（即 HTTP 請求或快取請求）。所有這些也暴露了它們的Content-Length，因此瀏覽器可以很好地猜測加載所有這些文件需要多長時間。
由於所有這一切都在很短的時間內發生，因此您不會注意到進度條中的微小不規則現象。有時您會看到進度條掛在三分之二處 - 這可能是因為瀏覽器無法像其他瀏覽器一樣快速地載入外部資源。
瀏覽器如何實現這一點？
谷歌瀏覽器
我研究了 Google Chrome（又稱 Chromium）的來源，發現這個類別名為進度追蹤器.cpp。實際上，它是由Apple編寫的，所以它很可能源於網路工具包渲染引擎。它包括以下字段：
ProgressTracker::ProgressTracker()
: m_totalPageAndResourceBytesToLoad(0)
, m_totalBytesReceived(0)
因此，正如我所說，資源位元組總數將被識別，並且進度將相應改變。有一個有趣的評論向您展示了第一個加載頁面的實際重要性是如何提升的：
// 對於使用 WebCore 佈局系統的文檔，將第一個佈局視為中點。
因此，如果加載第一個頁面（並且其外部資源仍在加載），則進度將為 50%。
Firefox（裂變附加元件）
現在，還有一個稍微簡單一點的指標。我調查過裂變，Firefox 的進度條擴充。如果我沒有讀錯的話，它做了一些人們很容易想到的事情。
每個網站都由許多DOM 元素。透過解析第一個 HTML 站點，可以估計要載入的 DOM 元素的總數。
對於每個載入的 DOM 元素，增加計數器，並根據它顯示一個進度條。
答案2
當瀏覽器從伺服器請求檔案時，伺服器可以選擇預先告訴瀏覽器該檔案有多大。伺服器透過發送一個內容長度標頭。
還有一些其他信息瀏覽器如何決定正在下載的檔案的大小。