浏览器如何知道已经加载了多少页面？

Question

查看浏览器的进度条，它在网页加载过程中有时会在接近尾声时变慢，我想知道浏览器是否根据页面上存在的元素的大小或不显示进度来显示进度。元素还是别的什么？

也许已经检查过 Firefox 或其他浏览器来源的人更详细地了解这一点？

Answer 1

什么是加载网站？

加载网页是或多或少像下载文件。在大多数情况下，您通过服务器获得的只是通过 HTTP 传输的 HTML 文件。首先，您向站点的 URL 发出 HTTP 请求，例如GET http://superuser.com.

正如威廉杰克逊所说，HTTP 使用Content-Length标头字段提前向您显示该文件的大小。这是浏览器可以评估的东西，以猜测它在下载整个站点时取得了多大进展。

但是，这无法涵盖 HTML 文件通过引用它们可以加载的所有资源。这些可能包括：

现在浏览器的任务是找到这些引用并请求它们。因此，对于每个外部引用，浏览器要么查询其缓存，要么发送新的 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）的来源，发现这个类叫做ProgressTracker.cpp。实际上，它是由 Apple 编写的，因此它很可能源于WebKit渲染引擎。它包括以下字段：

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

因此，正如我所说，资源字节的总数将被识别，并且进度将相应地改变。有一条有趣的评论向您展示了第一个加载页面的实际重要性是如何提升的：

// 对于使用 WebCore 布局系统的文档，将第一个布局视为中途点。

因此，如果加载了第一页（其外部资源仍在加载），则进度为 50%。

现在，还有一个稍微简单的指标。我研究了Fission，Firefox 的进度条扩展。如果我没有以错误的方式阅读它，它会做一些人们很容易想到的事情。

每个网站都由许多DOM 元素组成。通过解析第一个 HTML 站点，可以估计要加载的 DOM 元素的总数。

对于每个加载的 DOM 元素，增加计数器，并根据它显示一个进度条。