重新认识MIME类型

来源：互联网发布：烟机二件套知乎编辑：程序博客网时间：2024/04/29 21:32

重新认识MIME类型

我们都知道一件事情，编写网页要使用Html、css，我们也学过常用的html标签，也明白在文档中添加标签会在浏览器中显示一张图片。但是作为一个web开发者，你还需要知道浏览器到底是如何为我们显示出纷繁复杂的界面的。
要搞清楚这一点，MIME类型，这个你可能从来没留意的东西，可能你就要重新认识了。
请放心，这一点都不难。

关于读音

我想很多同学在使用各种各样的读音来念MIME，为了防止大家出去丢人，我先示范一下，MIME应该独坐[maim]，听起来就好像“男人”的英语法人一样。

关于浏览器

我想，大家不会犯我当年的错误，认为浏览器就是IE。事实上现在存在着大量的浏览器，有的有自己独立的内核，如chrome、Firefox、Ie、Microsoft Edge等，有些是在自己做了套衣裳，套在了别的浏览器上，如360浏览器、猎豹浏览器、UC浏览器、QQ浏览器。。。。。。
关于浏览器，我们的印象是下载下来，一路下一步安装好久可以用了。其实浏览器内部也是有很多模块组成的，大家可以认为浏览器是个大程序、而里面有又跟多小程序，分别负责处理不同的任务，当然专业点的说，这叫引擎，如js引擎是专门用来处理js代码的。

浏览器依靠MIME类型解释网页

我们在浏览器的地址栏输入一个网址，或者在搜索引擎中输入“京东”搜索之后，点击搜索结果都可以进入网站，看到京东的首页，首页上有图片、有文字等。
那么这个过程是如何实现的呢？
每当浏览器请求一个web页面时，web服务器会在发送实际内容之前，先发送一些头信息(Header)。这些头信息你在页面上市看不到的，你看到是web服务器返回的实际内容。当然对于我们学习开发的人来说，这都不是事。我们以chrome浏览器为例，打开浏览器，按下F12(有些电脑是Fn+F12，其他浏览器的操作基本都一样)，你会看到监测界面，如下图
浏览器监测工具

首先点击一下“NetWork”菜单，然后点击红色区域标记的部分，清除当前的内容。
按照由简到繁的顺序，我们首先请求一个非常简单的网页，这个网页我们自己来写，代码很简单，如下：

<!DOCTYPE html><html><head>    <title>测试页面</title></head><body><<b>测试页面</b></body></html>1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

使用浏览器打开这个网页，看到如下图的页面：
浏览器返回的文件
我们看下面监测工具的内容，，这个first.html就是你向服务器请求的文件，服务器也将这个文件返回给你了。但是我们前面说过，在返回实际内容之前，首先会返回一些头信息，点击”first.html”，可以看到如下界面（注意，如果你是直接打开first.html页面，可能会看不到下面的信息，请使用web服务器打开这个页面，如apache或者tomcat或者iis）
html文件的MIMEl类型
注意这段内容是在返回first.html的内容之前返回的，注意我标识的红色区域，Content_Type就是所谓的MIME类型。这个类型是web服务器返回的，它表示的first.html这个页面的内容类型，表示这是html文本，当实际内容从服务器返回来之后，浏览器就会根据这个MIME类型调用相应的木块进行处理。
现在我们在浏览器中输入”jd.com”并回车
京东返回的文件
我们可以看到左侧返回了很多文件，左侧是京东主页用到的所有的资源文件，我们点击“loading.gif”，会看到下面代码
京东主页的返回头信息
注意这张图片的MIME类型叫做 image/gif，再点开其下面的png图片
png图片的MIME类型
这里的MIME类型是image/png
从上面我们可以看出，不同的图片的MIME类型不一样，同理，不同的文件类型的MIME类型也不一样，如css文件和js文件的MIME类型分别为text/css和application/x-JavaScript。浏览器就是根据这些MIME类型来调用自身不同的模块来处理不同的文件的，比如负责css解释的模块将css样式应用到html上，负责处理图片的模块将图片显示到页面上。这样我们才看到了一个个精彩的网页。

注:可能有些人发现，并没有在返回的头信息中看到Content-Type属性，这也没关系，浏览器没有那么傻，会自己根据你的标签，只能判断类型的，比如读到img标签，就知道你返回的是一张图片，则会调用图片处理程序在浏览器显示图片。
总结：web服务器返回的内容就好比皇帝出巡，浏览器就好比负责迎接的地方官员。在皇帝(实际内容)到来之前，会有人先到地方跟地方沟通，比如皇帝这次来带几个妃子，带多少随从官员，每个妃子的爱好，大臣的兴趣等等。这样地方上就能根据这些具体情况进行准备，等皇帝的队伍到了，就能分门别类的进行处理。这就是MIME类型的重要性。

0 0