媒体类型通常是通过 HTTP 协议,由 Web 服务器告知浏览器的,更准确地说,是通过 Content-Type 来表示的,例如:
Content-Type: text/HTML
表示内容是 text/HTML 类型,也就是超文本文件。为什么是“text/HTML”而不是“HTML/text”或者别的什么?MIME Type 不是个人指定的,是经过 ietf 组织协商,以 RFC 的形式作为建议的标准发布在网上的,大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句,Email 附件的类型也是通过 MIME Type 指定的)。
通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type,如果是某个客户端自己定义的格式,一般只能以 application/x- 开头。
XHTML 正是一个获得广泛应用的格式,因此,在 RFC 3236 中,说明了 XHTML 格式文件的 MIME Type 应该是 application/xHTML+XML。
当然,处理本地的文件,在没有人告诉浏览器某个文件的 MIME Type 的情况下,浏览器也会做一些默认的处理,这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下,打开注册表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键,你可以看到所有 MIME Type 的配置信息。
常见的MIME类型
超文本标记语言文本 .html,.html text/html
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
GIF图形 .gif image/gif
JPEG图形 .ipeg,.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
代码如下 | 复制代码 |
function GetWinVer: string; var lpver:_OSVERSIONINFO; begin //###########获取Win系统版本################ lpver.dwOSVersionInfoSize:=SizeOf(_OSVERSIONINFO); //###########必须要分配内存################# if GetVersionExA(lpver) then begin case lpver.dwPlatformId of 0: Result:='Windows 32s'; 1:begin case lpver.dwMinorVersion of 0: Result:='Windows 95'; 10: Result:='Windows 98'; 90: Result:='Windows Me'; end; end; 2:begin case lpver.dwMajorVersion of 3: Result:='WindowsNT 3.51'; 4: Result:='WindowsNT 4.0'; 5:begin case lpver.dwMinorVersion of 0: Result:='Windows 2000'; 1: Result:='Windows XP'; 2: Result:='Windows 2003'; end; end; 6:begin case lpver.dwMinorVersion of 0: Result:='Windows Vista'; 1: Result:='Windows 7'; 2: Result:='Windows 8'; end; end; end; end; else Result:='Not Windows'; end; end; end; |
<embed width="480" height="338" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="dock=true&plugins=drelated-1&drelated.dxmlpath=relatedclips.xml&drelated.dposition=center&drelated.dshow=complete&drelated.dskin=grayskin.swf&drelated.dtarget=_self&skin=chrome.zip&image=http://blog.fity.cn/images/video.jpg" salign="lt" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="ply" id="ply"" width=100% src="http://blog.fity.cn/demo/mp4player/fity.cn_player.swf?file=http://blog.fity.cn/video.mp4" type="application/x-shockwave-flash">
很多时候,我们都想确认页面内容:html标签、css、js、图片等元素的加载顺序。
现在的浏览器基本都自带调试工具,下面就介绍下用chrome浏览器正确查看页面内容加载顺序的方法:
F12打开开发人员工具,点击【Network】(网络)的tab切换到页面元素加载内容查看标签,这里需要说明的是:在该面板未激活时的任何请求都不会被显示,这就是为什么 我们初始看到面板展示的是一片空白啦!要想查看页面内容加载顺序,必须重新加载下页面(f5,或保险起见ctrl+f),这样就可以快速查看到页面各内容加载顺序啦!
Network面板下还有很多分类tab,如:name、domain、cookies、 time(查看元素加载用时),点击各title还可按tab所代表的降序或升序排序标准重新对页面所加载的内容进行排序。当然这种排序,chrome在多次按f12即重新打开开发人员工具时会被重置,恢复至默认,这就很方便我们查看页面内容的加载顺序啦!!
firefox 的firebug查看页面内容加载顺序,方法同chrome类似,至于喜欢用ie的同学,可用httpwatch pro, 继续享受ie的摧残吧,骚年!!
另外需要强调的是:
页面是按“由上到下”的加载顺序来加载图片、js等内容的。但对于样式中加载的图片,它们的加载顺序是根据标签元素在html页面的先后位置决定的,如:body>子元素>子孙元素!更形象的实例是:
假如body 跟 div.test 元素都有定义背景图,则不管两者css是以行内式样式(标签style属性)、嵌入式样式表(<style></style>标签)还是外部样式表(<link>标签) 加载的,加载的顺序始终都是先加载body的背景图片再加载子元素div.test的背景图片,因为body 在html页面中位于div.test之前!
上面强调图片加载顺序完全可用文章前端介绍的“快速查看到页面各内容加载顺序”的方法得到验证!!
使用百度站长工具的朋友可能都知道他会让我们把css或js文件合并成一样,这样可以减少请求了,下面我来根据百度需要做了一篇关于合并静态资源请求的文章。
除过在前端编码的时候将css、js等静态资源文件合并压缩之外,我们还可以在页面中将多个css、js的请求合并为一个请求。
比如我们在淘宝的首页源码中可以看到以下的css引用:
<link rel="stylesheet" href="/??tb/global/2.6.0/global-min.css,tb/tb-fp/1.7.2/style-min.css?t=20131231">
这段代码通过一个网络请求完成两个css文件的请求,是怎么做到的呢?
原来是一个叫nginx-http-concat的模块,nginx-http-concat模块是淘宝开发的基于Nginx减少HTTP请求数量的扩展模块,主要是用于合并减少前端用户Request的HTTP请求的数量。
nginx-http-concat是一个nginx扩展模块,需要在安装nginx的服务器上重新编译nginx并加入nginx-http-concat,这个模块可以在github上下载。
安装之后需要重新修改nginx配置:
location /static/css/ {
concat on; #是否开启concat,默认是关闭的
concat_max_files 20; #允许concat的最大文件数,默认是10
}
location /static/js/ {
concat on;
concat_max_files 30;
}
nginx重新reload之后,就可以使用类似淘宝的方法将多个css或js文件合并为一个请求。比如:
/css/??global.min.css,index.min.css?t=20140107
以上concat的配置在http、server、location中都能生效,除此之外还有几个参数,不设置也罢。
concat_unique on; #是否只对同一类型的MIME types文件进行合并,默认是开启的
concat_types text/css application/x-javascript; #指定可以合并的MIME types,默认是text/css application/x-javascript
concat_delimiter; #指定合并文件之间的分隔符。该分隔符会被插入被合并的文件之间。
concat_ignore_file_error off; #是否忽略文件错误(403或404等),默认是关闭的。