关闭

重新认识MIME类型

标签: html5MIME类型
882人阅读 评论(0) 收藏 举报

重新认识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>

使用浏览器打开这个网页,看到如下图的页面:
浏览器返回的文件
我们看下面监测工具的内容,,这个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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:223662次
    • 积分:2723
    • 等级:
    • 排名:第13837名
    • 原创:58篇
    • 转载:4篇
    • 译文:0篇
    • 评论:62条
    最新评论