HTTP 协议中的数据压缩

数据压缩是提高 Web 站点性能的一种重要手段。对于有些文件来说，高达 70% 的压缩比率可以大大减低对于带宽的需求。随着时间的推移，压缩算法的效率也越来越高，同时也有新的压缩算法被发明出来，应用在客户端与服务器端。

在实际应用时，web 开发者不需要亲手实现压缩机制，浏览器及服务器都已经将其实现了，不过他们需要确保在服务器端进行了合理的配置。数据压缩会在三个不同的层面发挥作用：

• 首先某些格式的文件会采用特定的优化算法进行压缩，
• 其次在 HTTP 协议层面会进行通用数据加密，即数据资源会以压缩的形式进行端到端传输，
• 最后数据压缩还会发生在网络连接层面，即发生在 HTTP 连接的两个节点之间。

文件格式压缩

每一种文件类型都会存有冗余，也就是 浪费的空间 。如果一个典型的文本文件存在 60% 的冗余的话，那么对于其他类型的文件，例如音频或视频文件来说，这个比率会更高。不同于文本文件，这些其他类型的媒体文件占据的空间也更大，所以很早就出现了回收这些浪费的空间的需求。工程师们设计了可以应用于特定用途的文件类型的经过优化的算法。用于文件的压缩算法可以大致分为两类：

• 无损压缩。在压缩与解压缩的循环期间，不会对要恢复的数据进行修改。复原后的数据与原始数据是一致的（比特与比特之间一一对应）。对于图片文件来说，gif 或者 png 格式的文件就是采用了无损压缩算法。
• 有损压缩。在压缩与解压缩的循环期间，会对原始数据进行修改，但是会（希望）以用户无法觉察的方式进行。网络上的视频文件通常采用有损压缩算法，jpeg 格式的图片也是有损压缩。

一些特定的文件格式既可以采用无损压缩算法，又可以采用有损压缩算法，例如 webp，并且有损压缩算法可以对压缩比率进行配置，当然这会导致压缩品质的不同。为了使一个站点获得更好的性能，理想情况是在保持可以接受的品质水准的前提下，压缩比率尽可能得高。对于图片来说，通过压缩工具生成的图片对于 Web 应用来说，优化程度可能依然不够高。一般建议选用在保持所要求的品质的前提下压缩比率尽可能高的工具。这里有各种各样的工具专门用来干这个。

有损压缩通常会比无损压缩效率更高一些。

备注： 由于数据压缩技术在一些特定类型的文件上效果很好，再次进行压缩通常没有什么效果。事实上，这种做法常常会适得其反，因为间接开销（该类型算法通常需要使用字典，而字典的大小是会计入初始大小的）会比在压缩过程中获取的额外收益要高，从而会使文件的体积增加。不要对压缩格式的文件应用如下两种压缩技术。

端到端压缩技术

对于各种压缩手段来说，端到端压缩技术是 Web 站点性能提升最大的地方。端到端压缩技术指的是消息主体的压缩是在服务器端完成的，并且在传输过程中保持不变，直到抵达客户端。不管途中遇到什么样的中间节点，它们都会使消息主体保持原样。

所有的现代浏览器及服务器都支持该技术，唯一需要协商的是所采用的压缩算法。这些压缩算法是为文本内容进行过优化的。在上世纪 90 年代，压缩技术快速发展，为数众多的算法相继出现，扩大了可选的范围。如今只有两种算法有着举足轻重的地位：gzip 应用最广泛，br 则是新的挑战者。

为了选择要采用的压缩算法，浏览器和服务器之间会使用主动协商机制。浏览器发送 Accept-Encoding标头，其中包含有它所支持的压缩算法，以及各自的优先级，服务器则从中选择一种，使用该算法对响应的消息主体进行压缩，并且发送 Content-Encoding 标头来告知浏览器它选择了哪一种算法。由于该内容协商过程是基于编码类型来选择资源的展现形式的，在响应时，服务器至少发送一个包含 Accept-Encoding 的 Vary 标头以及该标头；这样的话，缓存服务器就可以对资源的不同展现形式进行缓存。

由于压缩技术可以带来很大的性能提升，建议对除了已经经过压缩的文件如图片、音频和视频文件之外的其他类型的文件均进行压缩。

Apache 服务器支持数据压缩，有 mod_deflate可供使用；nginx 中有ngx_http_gzip_module 模块；在 IIS 中则可以使用 <httpCompression> 元素。

逐跳压缩技术

逐跳压缩技术尽管与端到端压缩技术有些类似，但是它们在一点上有着本质的区别：即这里的压缩指的不是对源头服务器上的资源的压缩，以此来创建一份特定的展现形式然后进行传输，而是对客户端与服务器端之间的任意两个节点之间传递的消息的主体的压缩。在两个相邻的中间节点之间的连接上，可能会应用 不同 的压缩方式。

为了实现这个目的，HTTP 协议中采用了与端到端压缩技术所使用的内容协商机制相类似的机制：节点发送请求，使用 TE 标头来宣告它的意愿，另外一个节点则从中选择合适的方法，进行应用，然后在 Transfer-Encoding 标头中指出它所选择的方法。

在实际应用中，逐跳压缩对于服务器和客户端来说是不可见的，并且很少使用。TE 标头和 Transfer-Encoding 标头最常用来发送分块响应，允许在获得资源的确切长度之前就可以开始传输。

注意，在单次转发层面使用 Transfer-Encoding 标头和压缩技术是如此地少见，以至于 Apache、nginx 或 IIS 等服务器都不太容易配置。此类配置通常用在代理服务器层面。

内容协商

在 HTTP 协议中，内容协商 是一种机制，用于为同一 URI 提供资源不同的表示形式，以帮助用户代理指定最适合用户的表示形式（例如，哪种文档语言、哪种图片格式或者哪种内容编码）。

备注： 你可以在来自 WHATWG 的维基页面发现 HTTP 内容协商的一些缺点。HTML5 提供其他的选择来进行内容协商，例如 <source> 元素。

内容协商的基本原则

一份特定的文件被称为一项 资源 。当客户端获取资源的时候，会使用其对应的 URL 发送请求。服务器通过这个 URL 来选择它指向的资源的某一可用的变体——每一个变体称为一种表示形式——然后将这个选定的表示形式返回给客户端。整个资源，以及它的各种表示形式，共享一个特定的 URL。当访问某项资源的时候，内容协商会决定如何选择一种指定的表示形式。客户端和服务器端之间存在多种协商方式。

最佳表示形式的选取可以通过两种机制实现：

• 客户端设置特定的 HTTP 标头（又称为 服务端驱动型内容协商 或者 主动内容协商 ），这是进行内容协商的标准方式。
• 服务器返回 300（Multiple Choices）或者 406（Not Acceptable）、415（Unsupported Media Type）HTTP 响应状态码 （又称 为 代理驱动型协商 或者 响应式协商 ），这种方式一般用作备选方案。

随着时间的推移，也有其他一些内容协商的提案被提出来，比如透明内容协商以及 Alternates 标头。但是它们都没有获得人们的认可从而被遗弃。

服务端驱动型内容协商机制

在 服务端驱动型内容协商 或者 主动内容协商 中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的 HTTP 标头。这些标头描述了用户倾向的选择。服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。如果它不能提供一个合适的资源，它可能使用 406（Not Acceptable）、415（Unsupported Media Type）进行响应并为其支持的媒体类型设置标头（例如，分别对 POST 和 PATCH 请求使用 Accept-Post 或 Accept-Patch 标头）。相关算法与具体的服务器相关，并没有在规范中进行规定。例如这里有一份 Apache 服务器的内容协商算法。

HTTP/1.1 规范指定了一系列的标准标头用于启动服务端驱动型内容协商（Accept、Accept-Encoding、Accept-Language）。尽管严格来说 User-Agent 并不在此列，有时候它还是会被用来确定给客户端发送的所请求资源的特定表示形式，不过这种做法不提倡使用。服务器会使用 Vary 标头来说明实际上哪些标头被用作内容协商的参考依据（确切来说是与之相关的响应标头），这样可以使缓存的运作更有效。

除此之外，有一个向可供选择的列表中增加更多标头的实验性提案，称为 客户端提示（Client Hint）。客户端示意机制可以告知运行用户代理的设备类型（例如，是桌面计算机还是移动设备）。

即便服务端驱动型内容协商机制是最常用的对资源特定表示形式进行协商的方式，它也存在如下几个缺点：

• 服务器对浏览器并非全知全能。即便是有了客户端示意扩展，也依然无法获取关于浏览器能力的全部信息。与客户端进行选择的代理驱动型内容协商机制不同，服务器端的选择总是显得有点武断。
• 客户端提供的信息相当冗长（HTTP/2 协议的标头压缩机制缓解了这个问题），并且存在隐私风险（HTTP 指纹识别技术）。
• 因为给定的资源需要返回不同的表示形式，共享缓存的效率会降低，而服务器端的实现会越来越复杂。

Accept 标头

Accept 标头列举了用户代理希望接收的媒体资源的 MIME 类型。其中不同的 MIME 类型之间用逗号分隔，同时每一种 MIME 类型会配有一个品质因数（quality factor），该参数明确了不同 MIME 类型之间的相对优先级。

Accept 标头的值由浏览器或其他类型的用户代理确定，并且会由于上下文环境的不同而不同。比如在获取 HTML 页面、图片文件、视频文件或者是脚本文件的时候，无论是通过在地址栏中输入资源地址来获取还是通过 ``、<video> 或 <audio> 元素引用都是不一样的。浏览器可以自由使用它们认为最为合适的标头值；这里有一份常见浏览器 Accept 标头默认值的完整列表。

Accept-CH 标头实验性

备注： 这是被称为 客户端提示 的实验性技术方案的一部分，目前仅在 Chrome 46 及以后的版本中得到了实现。Device-Memory 值在 Chrome 61 或更高版本中。

该实验性标头 Accept-CH 列出了服务器可以用来选择合适响应的配置数据。合法值如下：

值	含义
Device-Memory	标明客户端设备的内存大小。该值是个估计值，设备的实际内存值会向 2 的次方取整，且除以 1024。比如 512MB 的内存对应的值为 0.5。
Viewport-Width	标明用 CSS 像素数值表示的布局视口（layout viewport）宽度。
Width	标明用物理像素值表示的资源宽度（换句话说就是一张图片的固有大小）。

Accept-Encoding 标头

Accept-Encoding 标头明确说明了（接收端）可以接受的内容编码形式（所支持的压缩算法）。该标头的值是一个 Q 因子清单（例如 br, gzip;q=0.8），用来提示不同编码类型值的优先级顺序。默认值 identity 的优先级最低（除非声明为其他优先级）。

将 HTTP 消息进行压缩是一种最重要的提升 Web 站点性能的方法。该方法会减小所要传输的数据量的大小，节省可用带宽。浏览器总是会发送该标头，服务器则应该配置为接受它，并且采用一定的压缩方案。

Accept-Language 标头

Accept-Language 标头用来提示用户期望获得的自然语言的优先顺序。该标头的值是一个 Q 因子清单（例如 de, en;q=0.7）。用户代理的图形界面上所采用的语言通常可以用来设置为默认值，但是大多数浏览器允许设置不同优先级的语言选项。

由于基于配置信息的信息熵的增加，修改后的值可以用作识别用户的指纹，所以不建议对其进行修改，不过这样的话 Web 站点也就不能依赖该值来揭示用户的真实期望。站点设计者不能过度热衷于通过这个标头来进行语言检测，因为它可能会导致糟糕的用户体验：

• 站点设计者应该总是提供一种方式来使用户能够覆盖由服务器端选择的语言，例如在页面上提供一个用于语言选择的按钮。大多数用户代理会为 Accept-Language 标头提供一个默认值，该值采用的是用户界面的显示的语言。通常终端用户不能对其进行修改，或者是不知道该怎么修改，或者在他们计算机的环境中无法进行修改。
• 一旦用户覆盖了服务器端选择的语言选项，站点就不应该再使用语言检测技术，而应该忠于明确选择的语言选项。换句话说，只有站点的入口页面应该使用这个标头来选择合适的语言。

User-Agent 标头

备注： 尽管使用该标头来进行内容选择是合理的，但是依赖这个标头来确定用户代理都支持哪些功能特性通常被认为是一个糟糕的做法。

User-Agent 标头可以用来识别发送请求的浏览器。该字符串中包含有用空格间隔的 产品标记符 及 注释 的清单。

产品标记符 由产品名称、后面紧跟的“/”以及产品版本号构成，例如 Firefox/4.0.1。用户代理可以随意添加多少产品标记符都可以。注释 是一个用括号分隔的自由形式的字符串。显然括号本身不能用在该字符串中。规范没有规定注释的内部格式，不过一些浏览器会把一些标记符放置在里面，不同的标记符之间使用“;”分隔。

Vary 响应标头

与前面列举的 Accept-* 形式的由客户端发送的标头相反，Vary 标头是由服务器在响应中发送的。它指示了服务器在服务端驱动型内容协商阶段所使用的标头清单。Vary 标头是必要的，它用于将决策的规范告知缓存，这样它就可以进行复现。这将使缓存发挥它的作用，同时确保缓存可以向用户提供正确的内容。

特殊值“*”意味着在服务端驱动型内容协商过程中同时采纳了未在标头中传递的信息来选择合适的内容。

Vary 标头是在 HTTP 协议的 1.1 版本中新添加的，它是为了使缓存恰当地工作。缓存为了能够与服务端驱动型内容协商机制协同工作，需要知道服务器选择传送内容的规范。这样的话，缓存服务器就可以重复该算法，直接提供恰当的内容，而不需要向服务器发送更多的请求。显然，通配符“*”阻碍了缓存机制发挥作用，因为缓存并不知道该通配符究竟指代哪些元素。有关更多信息，请参见 HTTP 缓存 > Vary 响应。

代理驱动型内容协商机制

服务端驱动型内容协商也有一些缺点：它不能很好的扩展。在协商机制中，每一个特性需要对应一个标头。如果想要使用屏幕大小、分辨率或者其他方面的特性，就需要创建一个新的 HTTP 标头。而且在每一次请求中都必须发送这些标头。在标头很少的时候，这并不是问题，但是随着数量的增多，消息的体积会导致性能的下降。带有精确信息的标头发送的越多，信息熵就会越大，也就准许了更多 HTTP 指纹识别行为，以及与此相关的隐私问题的发生。

从 HTTP 协议制定之初，该协议就准许另外一种协商机制：代理驱动型内容协商，或称为 响应式协商 。在这种协商机制中，当面临不明确的请求时，服务器会返回一个页面，其中包含了可供选择的资源的链接。资源呈现给用户，由用户做出选择。

不幸的是，HTTP 标准没有明确指定提供可选资源链接的页面的格式，这阻碍了该过程的无痛自动化。除了退回至 服务端驱动型内容协商 外，

这种自动化方法几乎无一例外都是通过脚本技术来完成的，尤其是 JavaScript 重定向技术：在检测了协商的条件之后，脚本会触发重定向动作。另外一个问题是，为了获得实际的资源，需要额外发送一次请求，减慢了将资源呈现给用户的速度。

MIME 类型

MIME (Multipurpose Internet Mail Extensions 也称为 多用途互联网邮件扩展) 是描述消息内容类型的标准，用来表示文档、文件或字节流的性质和格式。它在 IETF 的 RFC 6838 中进行了定义和标准化。

MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

互联网号码分配局（IANA）负责跟踪所有官方 MIME 类型，你可以在媒体类型页面中找到最新的完整列表。

>[!warning] >浏览器通常使用 MIME 类型（而不是文件扩展名）来确定如何处理URL，因此 Web服务器在响应头中添加正确的 MIME 类型非常重要。如果配置不正确，浏览器可能会无法解析文件内容，网站将无法正常工作，并且下载的文件也会被错误处理。

语法

MIME 类型通常仅包含两个部分：类型（type）和 子类型（subtype），中间由斜杠 / 分割，中间没有空白字符：：

type/subtype

类型：代表数据类型所属的大致分类，例如 video 或 text。

子类型：标识了 MIME 类型所代表的指定类型的确切数据类型。以 text 类型为例，它的子类型包括：plain（纯文本）、html（HTML 源代码）、calender（iCalendar/.ics 文件）。

每种类型都有自己的一组可能的子类型。一个 MIME 类型总是包含类型与子类型这两部分，且二者必需成对出现。

有一个可选的参数，能够提供额外的信息：

type/subtype;parameter=value

例如，对于主类型为 text 的任何 MIME 类型，可以添加可选的 charset 参数，以指定数据中的字符所使用的字符集。如果没有指定 charset，默认值为 ASCII（US-ASCII），除非被用户代理的设置覆盖。要指定 UTF-8 文本文件，则使用 MIME 类型 text/plain;charset=UTF-8。

MIME 类型对大小写不敏感，但是传统写法都是小写。参数值可以是大小写敏感的。

常见的 MIME 类型

类型可分为两类：独立的（discrete）和多部分的（multipart）。独立类型代表单一文件或媒介，比如一段文字、一个音乐文件、一个视频文件等。而多部份类型，可以代表由多个部件组合成的文档，其中每个部分都可能有各自的 MIME 类型；此外，也可以代表多个文件被封装在单次事务中一同发送。多部分 MIME 类型的一个例子是，在电子邮件中附加多个文件。

• 超文本标记语言文本 .html、.html：text/html

• 普通文本 .txt： text/plain

• RTF 文本 .rtf： application/rtf

• GIF 图形 .gif： image/gif

• JPEG 图形 .jpeg、.jpg： image/jpeg

• au 声音文件 .au： audio/basic

• MIDI 音乐文件 mid、.midi： audio/midi、audio/x-midi

• RealAudio 音乐文件 .ra、.ram： audio/x-pn-realaudio

• MPEG 文件 .mpg、.mpeg： video/mpeg

• AVI 文件 .avi： video/x-msvideo

• GZIP 文件 .gz： application/x-gzip

• TAR 文件 .tar： application/x-tar

独立类型

application 不明确属于其他类型之一的任何二进制数据；要么是将以某种方式执行或解释的数据，要么是需要借助某个或某类特定应用程序来使用的二进制数据。通用二进制数据（或真实类型未知的二进制数据）是 application/octet-stream。其他常用的示例包含 application/pdf、application/pkcs8 和 application/zip。（查看 IANA 上 application 类型的注册表）

audio 音频或音乐数据。常见的示例如 audio/mpeg、audio/vorbis（查看 IANA 上 audio 类型的注册表）

example 在演示如何使用 MIME 类型的示例中用作占位符的保留类型。这一类型永远不应在示例代码或文档外使用。example 也可以作为子类型。例如，在一个处理音频有关的示例中，MIME 类型 audio/example 表示该类型是一个占位符，且在实际使用这段代码时，此处应当被替换成适当的类型。

font 字体/字型数据。常见的示例如 font/woff、font/ttf 和 font/otf。（查看 IANA 上 font 类型的注册表）

image 图像或图形数据，包括位图和矢量静态图像，以及静态图像格式的动画版本，如 GIF 动画或 APNG。常见的例子有 image/jpeg、image/png 和 image/svg+xml。（查看 IANA 上 image 类型的注册表）

model 三维物体或场景的模型数据。示例包含 model/3mf 和 model/vrml。（查看 IANA 上 model 类型的注册表）

text 纯文本数据，包括任何人类可读内容、源代码或文本数据——如逗号分隔值（comma-separated value，即 CSV）格式的数据。示例包含：text/plain、text/csv 和 text/html。（查看 IANA 上 text 类型的注册表）

video 视频数据或文件，例如 MP4 电影（video/mp4）。（查看 IANA 上 video 类型的注册表）

对于那些没有明确子类型的文本文档，应使用 text/plain。类似的，没有明确子类型或子类型未知的二进制文件，应使用 application/octet-stream。

多部分类型

多部分类型指的是一类可分成不同部分的文件，其各部分通常是不同的 MIME 类型；也可用于——尤其在电子邮件中——表示属于同一事务的多个独立文件。它们代表一个复合文档。

HTTP 不会特殊处理多部分文档：信息会被传输到浏览器（如果浏览器不知道如何显示文档，很可能会显示一个“另存为”窗口）。除了几个例外，在 HTML 表单的 POST 方法中使用的 multipart/form-data，以及用来发送部分文档，与 206 Partial Content 一同使用的 multipart/byteranges。

有两种多部分类型：

message 封装其他信息的信息。例如，这可以用来表示将转发信息作为其数据一部分的电子邮件，或将超大信息分块发送，就像发送多条信息一样。例如，message/rfc822（用于转发或回复信息的引用）和 message/partial（允许将大段信息自动拆分成小段，由收件人重新组装）是两个常见的例子。（查看 IANA 上 message 类型的注册表）

multipart 由多个组件组成的数据，这些组件可能各自具有不同的 MIME 类型。例如，multipart/form-data（用于使用 FormData API 生成的数据）和 multipart/byteranges（定义于 RFC 7233, section 5.4.1，当获取到的数据仅为部分内容时——如使用 Range 标头传输的内容——与返回的 HTTP 响应 206 “Partial Content”组合使用）。（查看 IANA 上 multipart 类型的注册表）

对 Web 开发者至关重要的 MIME 类型

application/octet-stream

这是二进制文件的默认值。由于这意味着 未知的二进制文件，浏览器一般不会自动执行或询问执行。浏览器将这些文件视为 Content-Disposition 标头被设置为 attachment 一样，并弹出“另存为”对话框。

text/plain

这是文本文件的默认值。即使它其实意味着 未知的文本文件，但浏览器认为是可以直接展示的。

备注： text/plain 并不意味“任何种类的文本数据”。如果浏览器期待的是某种特定的文本数据，很可能不会将其视为匹配。具体来说，如果从声明 CSS 文件的 <link> 元素中下载了一个 text/plain 文件，那么如果提供的是 text/plain 类型，就不会将其识别为有效的 CSS 文件。CSS MIME 类型需要使用 text/css。

text/css

在网页中要被解析为 CSS 的任何 CSS 文件必须指定 MIME 为 text/css。通常，如果服务器不识别 CSS 文件的 .css 后缀，则可能将它们以 MIME 为 text/plain 或 application/octet-stream 来发送给浏览器：在这种情况下，大多数浏览器不将其识别为 CSS 文件而直接忽略。

text/html

所有的 HTML 内容都应该使用这种类型。XHTML 的其他 MIME 类型（如 application/xml+html）现在基本不再使用。

备注： 如果需要 XML 的严格解析规则、<![CDATA[...]]> 部分或 HTML/SVG/MathML 命名空间以外的元素，请使用 application/xml 或 application/xhtml+xml。

text/javascript

根据 IANA 媒体类型注册表、RFC 9239 和 HTML 规范，JavaScript 内容应始终使用 MIME 类型 text/javascript 提供。其他 MIME 类型对 JavaScript 无效，使用除 text/javascript 以外的任何 MIME 类型都可能导致脚本无法加载或运行。

你可能会发现某些 JavaScript 内容在 MIME 类型中错误地使用了 charset 参数，以指定脚本内容的字符集。对于 JavaScript 内容来说，charset 参数无效，在大多数情况下会导致脚本加载失败。

遗留的 JavaScript MIME 类型

除了 text/javascript MIME 类型外，出于历史原因，MIME 嗅探标准（定义浏览器应该如何解释媒体类型和如何处理无有效媒体类型的内容）允许使用匹配以下任意的 MIME 类型提供 JavaScript 代码：

• application/javascript 已弃用
• application/ecmascript 已弃用
• application/x-ecmascript 非标准
• application/x-javascript 非标准
• text/ecmascript 已弃用
• text/javascript1.0 非标准
• text/javascript1.1 非标准
• text/javascript1.2 非标准
• text/javascript1.3 非标准
• text/javascript1.4 非标准
• text/javascript1.5 非标准
• text/jscript 非标准
• text/livescript 非标准
• text/x-ecmascript 非标准
• text/x-javascript 非标准

备注： 即便任何给定的用户代理可能支持这里的部分或所有类型，你也只应该使用 text/javascript。它是唯一确保能在目前和以后正常工作的 MIME 类型。

图片类型

MIME 类型为 image 的文件包含图像数据。子类型指定数据所代表的具体图像文件格式。

以下是常用的图像类型，可在网页中 安全 使用：

• image/apng：动画便携式网络图形（APNG）
• image/avif：AV1 图像文件格式（AVIF）
• image/gif：图形交换格式（GIF）
• image/jpeg：联合图像专家小组图片（JPEG）
• image/png：便携式网络图形（PNG）
• image/svg+xml：可缩放矢量图形（SVG）
• image/webp：Web 图像格式（WEBP）

图像文件类型和格式指南提供了有关何时使用不同图像格式的信息和建议。

音频与视频类型

与图像的情况一样，HTML 并不强制要求 web 浏览器支持 <audio> 和 <video> 元素的任何特定文件和编解码器类型，因此在选择媒体使用的文件类型和编解码器时，必须考虑目标受众以及他们可能使用的浏览器（和这些浏览器的版本）范围。

我们的媒体容器格式指南提供了 web 浏览器通常支持的文件类型列表，包括其特殊用途、缺点、兼容性信息以及其他详细信息。

音频编解码器和视频编解码器指南列出了 web 浏览器通常支持的各种编解码器，并提供了兼容性细节和技术信息，如它们支持多少音频通道、使用哪种压缩方式以及它们的比特率等。在此基础上，WebRTC 使用的编解码器指南专门介绍了主要 web 浏览器支持的编解码器，因此你可以选择最适合你所希望支持的浏览器范围的编解码器。

音频和视频文件的 MIME 类型，通常指的是其容器格式（或者说文件类型）。添加可选的 codec 参数到 MIME 类型中，能进一步指出要使用的编解码器和编码媒体时曾用到的选项，如编解码器配置文件、级别或其他此类信息。

下面列出了网络内容最常用的 MIME 类型。不过，这并不是一份包含所有可用类型的完整列表。请参阅媒体容器格式指南以查看完整的列表。

MIME 类型	音频或视频类型
audio/wave、audio/wav、audio/x-wav、audio/x-pn-wav	采用 WAVE 容器的音频文件。一般支持 PCM 音频编码（WAVE codec "1"），其他解码器有限支持（如果有的话）。
audio/webm	采用 WebM 容器的音频文件。Vorbis 和 Opus 是 WebM 规范官方支持的最常用的解码器。
video/webm	采用 WebM 容器的音视频文件。VP8 和 VP9 是其最常用的视频解码器。Vorbis 和 Opus 是其最常用的音频解码器。
audio/ogg	采用 OGG 容器的音频文件。Vorbis 是这个多媒体文件格式最常用的音频解码器。现在，同样也支持 Opus。
video/ogg	采用 OGG 容器的音视频文件。常用的视频解码器是 Theora；常用的音频解码器为 Vorbis，不过 Opus 也变得越来越常用。
application/ogg	采用 OGG 容器的音视频文件。常用的视频解码器是 Theora；音频解码器为 Vorbis。

[multipart/form-data

multipart/form-data 可用于 HTML 表单从浏览器发送信息给服务器。

作为多部分文档格式，它由边界线（一个由双横滑线 -- 开始的字符串）划分出的不同部分组成。每一部分有自己的实体，以及自己的 HTTP 请求头，Content-Disposition 和 Content-Type 用于文件上传字段。

Content-Type: multipart/form-data; boundary=aBoundaryString
(other headers associated with the multipart document as a whole)

--aBoundaryString
Content-Disposition: form-data; name="myFile"; filename="img.jpg"
Content-Type: image/jpeg

(data)
--aBoundaryString
Content-Disposition: form-data; name="myField"

(data)
--aBoundaryString
(more subparts)
--aBoundaryString--

如下所示的 <form>：

<form
  action="http://localhost:8000/"
  method="post"
  enctype="multipart/form-data">
  <label>名字：<input name="myTextField" value="Test" /></label>
  <label><input type="checkbox" name="myCheckBox" /> 勾选</label>
  <label>
    上传文件：<input type="file" name="myFile" value="test.txt" />
  </label>
  <button>发送文件</button>
</form>

会发送这样的请求：

POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
Content-Length: 465

-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myTextField"

Test
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myCheckBox"

on
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myFile"; filename="test.txt"
Content-Type: text/plain

Simple file.
-----------------------------8721656041911415653955004498--

multipart/byteranges

multipart/byteranges 用于把部分的响应报文发送回浏览器。

当状态码 206 Partial Content 被发出后，这个 MIME 类型用于指出这个文件由若干部分组成，每一个都有其请求范围。就像其他多部分类型一样，Content-Type 使用 boundary 来制定分界线。每一个不同的部分都有 Content-Type 这样的 HTTP 标头来说明文件的实际类型，以及 Content-Range 来说明其范围。

HTTP/1.1 206 Partial Content
Accept-Ranges: bytes
Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
Content-Length: 385

--3d6b6a416f9b5
Content-Type: text/html
Content-Range: bytes 100-200/1270

eta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content
--3d6b6a416f9b5
Content-Type: text/html
Content-Range: bytes 300-400/1270

-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: "Open Sans", "Helvetica
--3d6b6a416f9b5--

设置正确的 MIME 类型的重要性

很多 web 服务器使用默认的 application/octet-stream 来发送未知类型。出于一些安全原因，对于这些资源浏览器不允许设置一些自定义默认操作，强制用户必须存储到本地以使用。

常见的导致服务器配置错误的文件类型如下所示：

• RAR 压缩文件。在这种情况，理想状态是，设置真实的编码文件类型；但这通常不可能，因为 .RAR 文件可能包含多种不同类型的资源。这种情况，将所发送文件的 MIME 类型配置为 application/x-rar-compressed。
• 音频或视频文件。只有正确设置了 MIME 类型的文件才能被 <video> 或<audio> 元素识别和播放。请确保指定了正确的音频和视频的媒体类型。
• 专有文件类型。避免使用 application/octet-stream，对于这种一般的 MIME 类型浏览器不允许定义默认行为（比如“在 Word 中打开”）。像 application/vnd.mspowerpoint 这样的类型可以让用户选择自动在幻灯片软件中打开这样的文件。

MIME 嗅探

在缺失 MIME 类型或客户端认为文件设置了错误的 MIME 类型时，浏览器可能会通过查看资源来进行 MIME 嗅探。

每一个浏览器在不同的情况下会执行不同的操作。（例如，Safari 会在发送的 MIME 类型不合适时查看文件的扩展名。）由于某些 MIME 类型可能代表可执行内容，会存在一些安全问题。服务器可以通过发送 X-Content-Type-Options 标头来阻止 MIME 嗅探。

其他传送文件类型的方法

MIME 类型不是传达文档类型信息的唯一方式：

• 有时会使用名称后缀，特别是在 Microsoft Windows 系统上。并非所有的操作系统都认为这些后缀是有意义的（特别是 Linux 和 Mac OS），并且像外部 MIME 类型一样，不能保证它们是正确的。
• 魔数（magic number）。不同类型的文件的语法通过查看结构来允许文件类型推断。例如，每个 GIF 文件以 47 49 46 38 39 十六进制值（GIF89）开头，每个 PNG 文件以 89 50 4E 47（.PNG）开头。并非所有类型的文件都有魔数，所以这也不是 100％ 可靠的方式。

MIME 对照表

媒体类型	文件扩展名	说明
application/msword	doc	微软 Office Word 格式（Microsoft Word 97 - 2004 document）
application/vnd.openxmlformats-officedocument.wordprocessingml.document	docx	微软 Office Word 文档格式
application/vnd.ms-excel	xls	微软 Office Excel 格式（Microsoft Excel 97 - 2004 Workbook
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xlsx	微软 Office Excel 文档格式
application/vnd.ms-powerpoint	ppt	微软 Office PowerPoint 格式（Microsoft PowerPoint 97 - 2003 演示文稿）
application/vnd.openxmlformats-officedocument.presentationml.presentation	pptx	微软 Office PowerPoint 文稿格式
application/x-gzip	gz, gzip	GZ 压缩文件格式
application/zip	zip, 7zip	ZIP 压缩文件格式
application/rar	rar	RAR 压缩文件格式
application/x-tar	tar, tgz	TAR 压缩文件格式
application/pdf	pdf	PDF 是 Portable Document Format 的简称，即便携式文档格式
application/rtf	rtf	RTF 是指 Rich Text Format，即通常所说的富文本格式
image/gif	gif	GIF 图像格式
image/jpeg	jpg, jpeg	JPG(JPEG) 图像格式
image/jp2	jpg2	JPG2 图像格式
image/png	png	PNG 图像格式
image/tiff	tif, tiff	TIF(TIFF) 图像格式
image/bmp	bmp	BMP 图像格式（位图格式）
image/svg+xml	svg, svgz	SVG 图像格式
image/webp	webp	WebP 图像格式
image/x-icon	ico	ico 图像格式，通常用于浏览器 Favicon 图标
application/kswps	wps	金山 Office 文字排版文件格式
application/kset	et	金山 Office 表格文件格式
application/ksdps	dps	金山 Office 演示文稿格式
application/x-photoshop	psd	Photoshop 源文件格式
application/x-coreldraw	cdr	Coreldraw 源文件格式
application/x-shockwave-flash	swf	Adobe Flash 源文件格式
text/plain	txt	普通文本格式
application/x-javascript	js	Javascript 文件类型
text/javascript	js	表示 Javascript 脚本文件
text/css	css	表示 CSS 样式表
text/html	htm, html, shtml	HTML 文件格式
application/xhtml+xml	xht, xhtml	XHTML 文件格式
text/xml	xml	XML 文件格式
text/x-vcard	vcf	VCF 文件格式
application/x-httpd-php	php, php3, php4, phtml	PHP 文件格式
application/java-archive	jar	Java 归档文件格式
application/vnd.android.package-archive	apk	Android 平台包文件格式
application/octet-stream	exe	Windows 系统可执行文件格式
application/x-x509-user-cert	crt, pem	PEM 文件格式
audio/mpeg	mp3	mpeg 音频格式
audio/midi	mid, midi	mid 音频格式
audio/x-wav	wav	wav 音频格式
audio/x-mpegurl	m3u	m3u 音频格式
audio/x-m4a	m4a	m4a 音频格式
audio/ogg	ogg	ogg 音频格式
audio/x-realaudio	ra	Real Audio 音频格式
video/mp4	mp4	mp4 视频格式
video/mpeg	mpg, mpe, mpeg	mpeg 视频格式
video/quicktime	qt, mov	QuickTime 视频格式
video/x-m4v	m4v	m4v 视频格式
video/x-ms-wmv	wmv	wmv 视频格式（Windows 操作系统上的一种视频格式）
video/x-msvideo	avi	avi 视频格式
video/webm	webm	webm 视频格式
video/x-flv	flv	一种基于 flash 技术的视频格式

按照内容类型排列的 MIME 类型列表

类型/子类型	扩展名
application/envoy	evy
application/fractals	fif
application/futuresplash	spl
application/hta	hta
application/internet-property-stream	acx
application/mac-binhex40	hqx
application/msword	doc
application/msword	dot
application/octet-stream	*
application/octet-stream	bin
application/octet-stream	class
application/octet-stream	dms
application/octet-stream	exe
application/octet-stream	lha
application/octet-stream	lzh
application/oda	oda
application/olescript	axs
application/pdf	pdf
application/pics-rules	prf
application/pkcs10	p10
application/pkix-crl	crl
application/postscript	ai
application/postscript	eps
application/postscript	ps
application/rtf	rtf
application/set-payment-initiation	setpay
application/set-registration-initiation	setreg
application/vnd.ms-excel	xla
application/vnd.ms-excel	xlc
application/vnd.ms-excel	xlm
application/vnd.ms-excel	xls
application/vnd.ms-excel	xlt
application/vnd.ms-excel	xlw
application/vnd.ms-outlook	msg
application/vnd.ms-pkicertstore	sst
application/vnd.ms-pkiseccat	cat
application/vnd.ms-pkistl	stl
application/vnd.ms-powerpoint	pot
application/vnd.ms-powerpoint	pps
application/vnd.ms-powerpoint	ppt
application/vnd.ms-project	mpp
application/vnd.ms-works	wcm
application/vnd.ms-works	wdb
application/vnd.ms-works	wks
application/vnd.ms-works	wps
application/winhlp	hlp
application/x-bcpio	bcpio
application/x-cdf	cdf
application/x-compress	z
application/x-compressed	tgz
application/x-cpio	cpio
application/x-csh	csh
application/x-director	dcr
application/x-director	dir
application/x-director	dxr
application/x-dvi	dvi
application/x-gtar	gtar
application/x-gzip	gz
application/x-hdf	hdf
application/x-internet-signup	ins
application/x-internet-signup	isp
application/x-iphone	iii
application/x-javascript	js
application/x-latex	latex
application/x-msaccess	mdb
application/x-mscardfile	crd
application/x-msclip	clp
application/x-msdownload	dll
application/x-msmediaview	m13
application/x-msmediaview	m14
application/x-msmediaview	mvb
application/x-msmetafile	wmf
application/x-msmoney	mny
application/x-mspublisher	pub
application/x-msschedule	scd
application/x-msterminal	trm
application/x-mswrite	wri
application/x-netcdf	cdf
application/x-netcdf	nc
application/x-perfmon	pma
application/x-perfmon	pmc
application/x-perfmon	pml
application/x-perfmon	pmr
application/x-perfmon	pmw
application/x-pkcs12	p12
application/x-pkcs12	pfx
application/x-pkcs7-certificates	p7b
application/x-pkcs7-certificates	spc
application/x-pkcs7-certreqresp	p7r
application/x-pkcs7-mime	p7c
application/x-pkcs7-mime	p7m
application/x-pkcs7-signature	p7s
application/x-sh	sh
application/x-shar	shar
application/x-shockwave-flash	swf
application/x-stuffit	sit
application/x-sv4cpio	sv4cpio
application/x-sv4crc	sv4crc
application/x-tar	tar
application/x-tcl	tcl
application/x-tex	tex
application/x-texinfo	texi
application/x-texinfo	texinfo
application/x-troff	roff
application/x-troff	t
application/x-troff	tr
application/x-troff-man	man
application/x-troff-me	me
application/x-troff-ms	ms
application/x-ustar	ustar
application/x-wais-source	src
application/x-x509-ca-cert	cer
application/x-x509-ca-cert	crt
application/x-x509-ca-cert	der
application/ynd.ms-pkipko	pko
application/zip	zip
audio/basic	au
audio/basic	snd
audio/mid	mid
audio/mid	rmi
audio/mpeg	mp3
audio/x-aiff	aif
audio/x-aiff	aifc
audio/x-aiff	aiff
audio/x-mpegurl	m3u
audio/x-pn-realaudio	ra
audio/x-pn-realaudio	ram
audio/x-wav	wav
image/bmp	bmp
image/cis-cod	cod
image/gif	gif
image/ief	ief
image/jpeg	jpe
image/jpeg	jpeg
image/jpeg	jpg
image/pipeg	jfif
image/svg+xml	svg
image/tiff	tif
image/tiff	tiff
image/x-cmu-raster	ras
image/x-cmx	cmx
image/x-icon	ico
image/x-portable-anymap	pnm
image/x-portable-bitmap	pbm
image/x-portable-graymap	pgm
image/x-portable-pixmap	ppm
image/x-rgb	rgb
image/x-xbitmap	xbm
image/x-xpixmap	xpm
image/x-xwindowdump	xwd
message/rfc822	mht
message/rfc822	mhtml
message/rfc822	nws
text/css	css
text/h323	323
text/html	htm
text/html	html
text/html	stm
text/iuls	uls
text/plain	bas
text/plain	c
text/plain	h
text/plain	txt
text/richtext	rtx
text/scriptlet	sct
text/tab-separated-values	tsv
text/webviewhtml	htt
text/x-component	htc
text/x-setext	etx
text/x-vcard	vcf
video/mpeg	mp2
video/mpeg	mpa
video/mpeg	mpe
video/mpeg	mpeg
video/mpeg	mpg
video/mpeg	mpv2
video/quicktime	mov
video/quicktime	qt
video/x-la-asf	lsf
video/x-la-asf	lsx
video/x-ms-asf	asf
video/x-ms-asf	asr
video/x-ms-asf	asx
video/x-msvideo	avi
video/x-sgi-movie	movie
x-world/x-vrml	flr
x-world/x-vrml	vrml
x-world/x-vrml	wrl
x-world/x-vrml	wrz
x-world/x-vrml	xaf
x-world/x-vrml	xof

按照文件扩展名排列的 MIME 类型列表

扩展名	类型/子类型
	application/octet-stream
323	text/h323
acx	application/internet-property-stream
ai	application/postscript
aif	audio/x-aiff
aifc	audio/x-aiff
aiff	audio/x-aiff
asf	video/x-ms-asf
asr	video/x-ms-asf
asx	video/x-ms-asf
au	audio/basic
avi	video/x-msvideo
axs	application/olescript
bas	text/plain
bcpio	application/x-bcpio
bin	application/octet-stream
bmp	image/bmp
c	text/plain
cat	application/vnd.ms-pkiseccat
cdf	application/x-cdf
cer	application/x-x509-ca-cert
class	application/octet-stream
clp	application/x-msclip
cmx	image/x-cmx
cod	image/cis-cod
cpio	application/x-cpio
crd	application/x-mscardfile
crl	application/pkix-crl
crt	application/x-x509-ca-cert
csh	application/x-csh
css	text/css
dcr	application/x-director
der	application/x-x509-ca-cert
dir	application/x-director
dll	application/x-msdownload
dms	application/octet-stream
doc	application/msword
dot	application/msword
dvi	application/x-dvi
dxr	application/x-director
eps	application/postscript
etx	text/x-setext
evy	application/envoy
exe	application/octet-stream
fif	application/fractals
flr	x-world/x-vrml
gif	image/gif
gtar	application/x-gtar
gz	application/x-gzip
h	text/plain
hdf	application/x-hdf
hlp	application/winhlp
hqx	application/mac-binhex40
hta	application/hta
htc	text/x-component
htm	text/html
html	text/html
htt	text/webviewhtml
ico	image/x-icon
ief	image/ief
iii	application/x-iphone
ins	application/x-internet-signup
isp	application/x-internet-signup
jfif	image/pipeg
jpe	image/jpeg
jpeg	image/jpeg
jpg	image/jpeg
js	application/x-javascript
latex	application/x-latex
lha	application/octet-stream
lsf	video/x-la-asf
lsx	video/x-la-asf
lzh	application/octet-stream
m13	application/x-msmediaview
m14	application/x-msmediaview
m3u	audio/x-mpegurl
man	application/x-troff-man
mdb	application/x-msaccess
me	application/x-troff-me
mht	message/rfc822
mhtml	message/rfc822
mid	audio/mid
mny	application/x-msmoney
mov	video/quicktime
movie	video/x-sgi-movie
mp2	video/mpeg
mp3	audio/mpeg
mpa	video/mpeg
mpe	video/mpeg
mpeg	video/mpeg
mpg	video/mpeg
mpp	application/vnd.ms-project
mpv2	video/mpeg
ms	application/x-troff-ms
mvb	application/x-msmediaview
nws	message/rfc822
oda	application/oda
p10	application/pkcs10
p12	application/x-pkcs12
p7b	application/x-pkcs7-certificates
p7c	application/x-pkcs7-mime
p7m	application/x-pkcs7-mime
p7r	application/x-pkcs7-certreqresp
p7s	application/x-pkcs7-signature
pbm	image/x-portable-bitmap
pdf	application/pdf
pfx	application/x-pkcs12
pgm	image/x-portable-graymap
pko	application/ynd.ms-pkipko
pma	application/x-perfmon
pmc	application/x-perfmon
pml	application/x-perfmon
pmr	application/x-perfmon
pmw	application/x-perfmon
pnm	image/x-portable-anymap
pot,	application/vnd.ms-powerpoint
ppm	image/x-portable-pixmap
pps	application/vnd.ms-powerpoint
ppt	application/vnd.ms-powerpoint
prf	application/pics-rules
ps	application/postscript
pub	application/x-mspublisher
qt	video/quicktime
ra	audio/x-pn-realaudio
ram	audio/x-pn-realaudio
ras	image/x-cmu-raster
rgb	image/x-rgb
rmi	audio/mid
roff	application/x-troff
rtf	application/rtf
rtx	text/richtext
scd	application/x-msschedule
sct	text/scriptlet
setpay	application/set-payment-initiation
setreg	application/set-registration-initiation
sh	application/x-sh
shar	application/x-shar
sit	application/x-stuffit
snd	audio/basic
spc	application/x-pkcs7-certificates
spl	application/futuresplash
src	application/x-wais-source
sst	application/vnd.ms-pkicertstore
stl	application/vnd.ms-pkistl
stm	text/html
svg	image/svg+xml
sv4cpio	application/x-sv4cpio
sv4crc	application/x-sv4crc
swf	application/x-shockwave-flash
t	application/x-troff
tar	application/x-tar
tcl	application/x-tcl
tex	application/x-tex
texi	application/x-texinfo
texinfo	application/x-texinfo
tgz	application/x-compressed
tif	image/tiff
tiff	image/tiff
tr	application/x-troff
trm	application/x-msterminal
tsv	text/tab-separated-values
txt	text/plain
uls	text/iuls
ustar	application/x-ustar
vcf	text/x-vcard
vrml	x-world/x-vrml
wav	audio/x-wav
wcm	application/vnd.ms-works
wdb	application/vnd.ms-works
wks	application/vnd.ms-works
wmf	application/x-msmetafile
wps	application/vnd.ms-works
wri	application/x-mswrite
wrl	x-world/x-vrml
wrz	x-world/x-vrml
xaf	x-world/x-vrml
xbm	image/x-xbitmap
xla	application/vnd.ms-excel
xlc	application/vnd.ms-excel
xlm	application/vnd.ms-excel
xls	application/vnd.ms-excel
xlt	application/vnd.ms-excel
xlw	application/vnd.ms-excel
xof	x-world/x-vrml
xpm	image/x-xpixmap
xwd	image/x-xwindowdump
z	application/x-compress
zip	application/zip