☰

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

tag-icon • tag-icon firefox browser progress
浏览器如何知道已加载了多少页面？

看到浏览器的进度条，网页加载过程中，进度条有时会在末尾变慢，我想知道浏览器是否根据尺寸页面上存在的元素或不。元素或者其他什么东西？

也许有人检查过 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 的调试器实际查看此内容。这是加载超级用户的时间线，经过过滤，仅显示请求。点击放大：

在此处输入图片描述

我们可以看到，主 Super User 站点的加载时间最长，但从该站点开始，还有其他页面加载（即 HTTP 请求或缓存请求）。所有这些页面也都暴露了它们的Content-Length，因此浏览器可以很好地猜测加载所有这些文件需要多长时间。

由于所有这些都是在很短的时间内发生的，因此您不会注意到进度条中的细微异常。有时您会看到进度条在三分之二处挂起 - 这可能是因为浏览器无法像其他浏览器一样快速加载外部资源。

浏览器如何实现这一点？

谷歌浏览器

我研究了 Google Chrome（又名 Chromium）的源代码，发现了一个名为进度跟踪器.cpp。实际上，它是由 Apple 编写的，因此很可能源自WebKit渲染引擎。它包含以下字段：

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

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

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

因此，如果第一页已加载（并且其外部资源仍需加载），则进度将为 50%。

Firefox（Fission 插件）

现在还有一个稍微简单一点的指标。我研究过裂变，Firefox 的进度条扩展。如果我没看错的话，它做的事情很容易让人想到。

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

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

答案2

当浏览器向服务器请求文件时，服务器可以选择提前告知浏览器文件的大小。服务器通过发送内容长度标头。

还有一些其他信息浏览器如何确定正在下载的文件的大小。

相关内容