html - HTML文件的不同文件大小

Question

有人可以解释一下 HTML 文件的文件大小差异吗？这四种情况衡量的是什么？

让我们以这个页面为例http://seotoolsforexcel.com/pagesize/

• 如果我在本地将其保存ctrl+s为没有媒体的 HTML 文件（它们位于另一个文件夹中） - Windows 资源管理器中显示的 HTML 文件大小为39kB。是的，我知道，确实有两种大小：文件大小和它在硬盘驱动器上的位置——但我对文件大小很感兴趣。
• 如果我打开源代码ctrl-u，复制整个代码并将其保存为 txt - 文件大小为17kB
• 如果我在 Chrome 开发人员工具（网络选项卡）中打开此页面 - HTML 文档的文件大小为4,9kB
• 如果我在 Chrome 开发人员工具中查看Content Length标题 - 大小为4,656kB

ps：我选择这个文件作为例子，因为这里有四种不同的尺寸。

pps：关于Content length- 我添加了 Chrome 开发者工具的截图：

标签： htmlsizefilesize

Answer 1

当您使用 CTRL+S 保存 HTML 时，浏览器首先运行 JavaScript 代码并将其添加到 HTML。在您的示例中，有一个 JavaScript 代码<style>使用一堆 CSS 规则向页面添加一个元素，这使得文件大小更大。

当您查看页面源 (CTRL+U) 时，这是您的浏览器从服务器获取的确切 HTML。之所以在 Network 选项卡中只看到 4.9KB 是因为该文件被下载压缩（gzipped），并且浏览器在解析之前将其解压缩。

我在 Firefox 和 Chrome 中都看不到Content-Length响应标头，所以我真的不知道你为什么得到这个数字。数字是字节还是千字节？