降低照片HTTP恳求的方式剖析

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

编码以下:

拷贝编码
编码以下:

<div style="border: 2px ridge rgb(51, 51, 51); background-color: rgb(244, 245, 235); width: 200px; padding-top: 4px;">
<center>
<a href="javascript:alert('Home')" title="Home"><img src="images/home.gif" border="0"></a> <a href="javascript:alert('Gift')" title="Gift"><img src="images/gift.gif" border="0"></a>
<a href="javascript:alert('Cart')" title="Cart"><img src="images/cart.gif" border="0"></a>
<a href="javascript:alert('Settings')" title="Settings"><img src="images/settings.gif" border="0"></a>
<a href="javascript:alert('Help')" title="Help"><img src="images/help.gif" border="0"></a>
</center>
</div>

留意:这5个按钮各自应用了5张照片

那末,5张照片就代表着你的该网页页面又多了5个HTTP恳求,它将大大减少网页页面的展现高效率。提升的HTTP恳求是致使网页页面特性降低的最大刽子手,因此大家应当尽可能降低HTTP恳求,而照片是提升HTTP恳求的最大将会者,搞定它,事不宜迟!呵呵^_^
下面列出了3种处理计划方案:
计划方案1:照片地形图(图象网络热点):它将客户的点一下投射到1个实际操作,而不用向后端开发Web服务器推送任何恳求。
编码以下:

拷贝编码
编码以下:

<div class="panel_div" style="border:2px ridge #333333;background-color:rgb(244, 245, 235);width:180px;padding:4px 0px 0px 2px;">
<img usemap="#mymap" src="images/imagemap.gif" border="0" />
<map name="mymap"> <!-- img应用的map -->
<area shape="rect" coords="0,0,31,31" href="javascript:alert('Home');"/>
<area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts');"/>
<area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')"/>
<area shape="rect" coords="106,0,136,31" href="javascript:alert('Set')"/>
<area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')"/>
</map>
</div>

留意:这5个按钮实际上是在1张照片中


计划方案2:CSS Sprites:应用这类方法还可以将5张照片合拼为1张照片,而且更加灵便。
编码以下:

拷贝编码
编码以下:

<style>
/* 对div中全部span的款式设定 */
#navbar span {
/* 界定<span>标识将截取的照片宽度和高宽比 */
width:30px; height:31px;
/* 加上包括了全部标志的照片 */
background-image:url(images/imagemap.gif);
display:inline; float:left;
}
/* background-position:特定标志在CSS Sprites照片的偏位量
margin-left 和 margin-right 则用来精准定位标志部位
*/
.home { background-position:0 0; margin-left:2px;}
.gifts { background-position:⑶5px 0; margin-left:50px;}
.cart { background-position:⑺0px 0; margin-left:120px;}
</style>
<div id="navbar" style="border: 2px ridge rgb(51, 51, 51); padding: 4px 0pt; background-color:#ff0; width: 300px; height: 32px;">
<a href="javascript:alert('Home')" title="Home">
<span class="home"></span></a> <!-- 留意:该span标识用来载入照片 -->
<a href="javascript:alert('Gifts')" title="Gifts">
<span class="gifts"></span></a> <!-- 留意:该span标识用来载入照片 -->
<a href="javascript:alert('Cart')" title="Cart">
<span class="cart"></span></a> <!-- 留意:该span标识用来载入照片 -->
</div>


留意:在这个“CSS Sprites”选用到的照片便是“照片地形图”中的同1张照片。(并特意只显示信息在其中的3个标志)


CSS Sprites的基本原理:只是精准定位到照片在其中的1块地区,并显示信息在某个部位罢了。
CSS Sprites的优势:根据只应用1个照片降低了HTTP恳求,而且比“照片地形图”更灵便。
许多人会误觉得:合拼的照片要比分离出来的照片的总和要大,由于合拼的照片中包括有额外的空白地区。

具体上,合拼的照片要比分离出来的照片的总和要小,这是由于它减少了照片本身的花销(色调表、文件格式信息内容,这些)。

计划方案3:内联照片:根据应用data: URL方式在Web网页页面中包括照片,且不用任何附加的HTTP恳求。(IE现阶段不适用)
1、内联照片的基本原理:容许将小块数据信息内联为‘马上数(immediate data)’,数据信息就包括在其URL本身当中。
2、内联照片的文件格式:data:[<mediatype>][;base64],<data>
举例:1个内联照片能够界定为
<img src="data:image/gif;base64,asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33" >
在其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”便是该照片的数据信息。
data: URL方式-> 基础用于内联照片,能够用在任何必须特定URL的地区,如:script和a标识中。
3、内联照片的缺点:
a> 不会受到IE的适用(IE7也这般);
b> 储存数据信息的尺寸上受到限制制(Firefox 1.5适用高达100KB的数据信息);
c> Base64编号会提升其照片的尺寸;
d> 在超越不一样网页页面时不容易被缓存文件
(能够将内联照片做为情况照片储存出外部CSS款式表格中来处理此难题,但会提升1个HTTP恳求以换得数据信息被缓存文件的結果。);

自己强烈推荐:依据实际状况,应用计划方案1:照片地形图(图象网络热点)或计划方案2:CSS Sprites。
上一篇:应用较为纯的CSS打造很Web2.0的按钮 返回下一篇:没有了