HTML 文件的总大小（包括其中的图像大小）答案

【问题标题】：Total size of the HTML file (includes size of images inside it)HTML 文件的总大小（包括其中的图像大小）
【发布时间】：2014-01-16 01:15:19
【问题描述】：

相关问题是here（但没有答案）。我想返回通过 XMLHttpRequest 加载的 HTML 的大小。我缓存文件 30 分钟。所以我确实将文件保存在一个临时文件夹中，例如 temporary_folder/filename.html。我可以使用filesize(filename-here) 来获取这个文件的大小。但事实是这只是返回其中的 HTML 代码的大小。此 HTML 文件还包含使用 <img> 标记的图像。我怎样才能得到这些的全部尺寸？简而言之，我想要 filename.html 的大小 + （里面的图片）的大小。

function updateProgress (event)
{
    var percentComplete = ((event.loaded/event.total)*100);
    $('#progress-bar').val(percentComplete);
    $('#progressbar-value').text(percentComplete);
}

这就是我更新进度条并显示加载百分比的方式。但这会根据 HTML 文件的大小而不是其中包含的图像大小进行更新。说 5 KB（文件名.html）。此 filename.html 包含一些大小为 3 或 4 MB 的大图像，因此进度条结束的速度比实际加载时间快。

有解决这个问题的想法吗？

编辑：

在构建 HTML 文件时阅读此处的一个答案后，我跟踪了图像的大小并将总大小添加到文件名中。但随之而来的是一个新的问题。在 PHP 端，我将 Content-Length 设置为总大小。但是现在在客户端，首先加载 HTML，然后渲染图像。所以进度条再次填充不匹配。我还在控制台中看到以下错误

Uncaught NotSupportedError: The implementation did not support the requested type of object or operation. (anonymous function)
w.extend.each 
w.fn.w.each 
w.fn.extend.val 
updateProgress

【问题讨论】：

您也许可以使用AJAX progress 做一些事情（仅限HTML 5 iirc）。我假设这个例子中的evt.total 是字节......
你能提供更多细节吗？在客户端浏览器或服务器上缓存？如果是前者，你如何拯救他们？您试图实现普通缓存机制无法做到的事情？你打算怎么处理这个尺寸？
另外 - 你是缓存图片还是只缓存 html？
@AlexK。我的页面左侧会有一些过滤器选项。当用户选择/取消选择一些时，表单将通过XMLHttpRequest的POST方法提交。数据库查询后，输出将保存为临时文件夹中的 HTML 文件。读取 HTML 文件，计算文件大小，设置内容长度标头，回显输出。如果再次使用相同的参数提交表单，则临时文件夹中的文件将在没有数据库查询的情况下被回显。
@LindsayMorsillo：当然，图片会被缓存。

标签： javascript php html xmlhttprequest

【解决方案1】：

通过 XMLHttpRequest 加载的数据大小与您使用 filesize(filename-here) 获得的 HTML 大小完全相同，因为所有其他数据（如图像、脚本或 CSS）都是在解释 HTML 后由浏览器在后续请求中加载的。

如果您确实需要（PHP）服务器上所有嵌入文件的大小，我假设您在构建 HTML 时必须自己跟踪它，即每当您编写 <img> 标记时，使用 @987654324 @ 并将所有数字相加。

如果您需要客户端 (JavaScript) 上的大小，您可以遍历 DOM（例如使用document.getElementsByTagName("img")，然后使用this question 中描述的方法获取单个文件大小并将这些添加到 html 的大小文件。

【讨论】：

【解决方案2】：

我建议你开始here

该程序是一个 MHT 文件创建器（本质上它会根据提供的 url 创建一个包含 html、外部图像、javascript、css 等的 zip 文件）

我建议您阅读源代码并根据您的需要调整代码...

【讨论】：

【解决方案3】：

我一直在寻找类似的东西，但我知道一些网络服务会告诉你大小，比如 Pingdom 工具 (tools.pingdom.com)，并且还会显示加载时间。希望对您有所帮助！

【讨论】：

【解决方案4】：

它认为以下问答提供了一个很好的建议： Determining image file size + dimensions via Javascript?

基本上使用 Ajax 发出 HEAD HTTP 请求。这将返回Content Length

那么就这样向服务器询问每个图像的大小？

【讨论】：