仓酷云

标题: html5教程之Data URI和MHTML完全办理一切扫瞄器 [打印本页]

作者: 简单生活 时间: 2015-1-15 23:20
标题: html5教程之Data URI和MHTML完全办理一切扫瞄器
Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。网页制造Poluoluo文章简介：DataURI和MHTML二者的共同能够完全的办理一切的支流扫瞄器，它们因为没法被缓存和反复使用的缺点，以是其实不合适间接在页面中利用，但在CSS和JavaScript文件中对图片得当地利用有十分年夜的优胜性.
DataURI
DataURI是由RFC2397界说的一种把小文件间接嵌进文档的计划。经由过程以下语法就能够把小文件酿成指定编码间接嵌进到页面中：
data:[<MIME-type>][;base64],<data>

MIME-type：指定嵌进数据的MIME。其情势是[type]/[subtype];parameter，好比png图片对应的MIME是image/png。parameter能够用碇付ǜ郊拥男畔嗲r下是用于指定text/plain和text/htm等的笔墨编码体例的charset参数。默许是text/plain;charset=US-ASCII。
base64：声明前面的数据的编码是base64的，不然数据必需要用百分号编码（即对内容举行urlencode）。

在上个世纪HTML4.01引进了DataURI计划，到明天为止除IE6和IE7以外，一切支流扫瞄器都撑持，但IE8对DataURI的撑持仍是无限制的，只撑持object（仅是图片时）、img、inputtype=image、link和CSS中的URL，且数据量不克不及年夜于32K。
长处：

削减HTTP哀求数，没有了TCP毗连损耗和统一域名下扫瞄器的并发数限定。
关于小文件会下降带宽。固然编码后数据量会增添，可是却削减了http头，当http头的数据量年夜于文件编码的增量，那末就会下降带宽。
关于HTTPS站点，HTTPS和HTTP混用会有平安提醒，而HTTPS相对HTTP来说开支要年夜更多，以是DataURI在这方面的上风更分明。
能够把全部多媒体页面保留为一个文件。

弱点：

没法被反复使用，统一个文档使用屡次统一个内容，则必要反复屡次，数据量大批增添，增添了下载工夫。
没法被单独缓存，以是其包括文档从头加载时，它也要从头加载。
客户端必要从头解码和显现，增添了点损耗。
不撑持数据紧缩，base64编码会增添1/3巨细，而urlencode后数据量会增添更多。
倒霉于平安软件的过滤，同时也存在必定的平安隐患。

MHTML
MHTML是MIMEHTML(MultipurposeInternetMailExtensionHTML)的缩写，是由RFC2557界说的把一个多媒体的页面一切内容都保留到统一个文档办理计划。这个计划是由微软提出从IE5.0入手下手撑持，别的Opera9.0也入手下手撑持，Safari能够把文件保留为.mht（MHTML文件的后缀）格局，但不撑持显现它。
MHTML和DataURI还对照相似，有更壮大的功效和更庞大的语法，而且没有DataURI中“没法被反复使用”的弱点，但MHTML利用起来不敷天真便利，好比对资本援用的URL在mht文件中能够是绝对地点，不然必需是相对地点。hedger在《CrossBrowserBase64EncodedImagesEmbeddedinHTML》针对IE的办理计划利用的是绝对路径就是由于声了然Content-type:message/rfc822使IE依照MHTML来剖析，假如不修正Content-type则必要利用MHTML协定，这个时分必需利用相对路径，如《MHTML–whenyouneeddata:URIsinIE7andunder》。
使用
DataURI和MHTML二者的共同能够完全的办理一切的支流扫瞄器，它们因为没法被缓存和反复使用的缺点，以是其实不合适间接在页面中利用，但在CSS和JavaScript文件中对图片得当地利用有十分年夜的优胜性：

年夜年夜削减哀求数，如今年夜型网站的CSS援用了大批的图片资本。
CSS和JavaScript都能够被缓存，直接的完成了数据的缓存。
使用CSS能够办理DataURI的反复使用成绩
告辞CSSSprites，CSSSprites的呈现是为了削减哀求数，但它除带来在不断定情形下的非常外，CSSSprites还必要工资的图片兼并，即便有兼并工具也仍旧必需工资地在怎样无效的拼图上泯灭大批的工夫，并带来保护的坚苦。当你遵守必定的计划准绳后，你就能够完整丢弃CSSSprites来编写CSS，最初利用工具在上传到服务器环节把图片转换成DataURI和MHTML，如《使用data-uri兼并款式表和图片》顶用python完成的工具，这能够勤俭大批的工夫。
base64编码把图片文件增添了1/3，DataURI和MHTML同时利用相称于增添了2/3，但CSS和JavaScript可使用gzip紧缩，其能够节俭2/3的数据量，以是利用gzip紧缩后的终极数据量是(1+1/3)*2*(1/3)=8/9，以是终极流量是削减的。

为了便利在CSS中完成DataURI和MHTML，我写了一个DataURI&MHTML天生器，你能够看使用其天生DataURI&MHTML使用实例。
在CSS文件中利用使用MHTML时URL必需利用相对路径，招致十分不天真，以是能够思索利用CSSexpression来办理（DEMO），好比：
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage=url(mhtml:+
document.getElementById(data-uri-css).getAttribute(href,4)+
!03114501408821761.gif);
}(this));
</p>
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展.

作者: 精灵巫婆 时间: 2015-1-17 21:58
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 冷月葬花魂 时间: 2015-1-26 23:18
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 小妖女 时间: 2015-2-5 07:16
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 莫相离 时间: 2015-2-11 08:20
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 小女巫 时间: 2015-3-2 04:40
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 老尸 时间: 2015-3-11 04:53
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 灵魂腐蚀 时间: 2015-3-17 22:09
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 蒙在股里 时间: 2015-3-25 08:28
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

欢迎光临仓酷云 (http://www.ckuyun.com/)