Web优化-减少http的请求数量（前端）

最新推荐文章于 2024-03-19 18:44:50 发布

weixin_34290000

最新推荐文章于 2024-03-19 18:44:50 发布

阅读量338

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/wlxll/p/5952101.html

版权

　　使用Image maps替换多张带有超链接的图片，使用图片地图这种方式可以减少Http请求。实际使用的时，发现加载image maps图片的时间倒是很长，客户端图片地图可以使用Map标签实现操作。

<img usemap="#map1" border=0 src="/img/1.gif">
<map>
    <area shape="rect" coords="0,031,31" href="home.html" title="Home">
    <area shape="rect" coords="30,0,66,31" href="gift.html" title="gift">
</map>

　　css Sprites也可以合并图片，但更为灵活。css sprites是任何支持背景图片的Html元素。使用css的background-position属性，可以将Html元素放置到背景图片中期望的位置上。

<div style="background-image:url('a_sprites.gif');background-position:-260px -90px;width:26px;height:24px;">
    
</div>

css sprites定位

　　图片地图也可以用css sprites的方式实现。相对于图片地图，它的图片没有必要连续的。

　　通过使用data:URL模式可以在web页面中包含图片但无需任何额外的http请求。因为URL是内联在页面中的，在跨越不同页面时不会被缓存。不要内联公司Logo，因为编码过的Logo会导致页面变大。这种情况下，聪明的做法是使用css并将内联图片作为背景。将该css规则放在外部样式表中，这意味着数据可以缓存在样式表内部。

　　合并脚本和样式表。将这些单独的文件合并到一个文件中，可以减少Http请求的数量并缩短最终用户响应时间。

　　摘抄于《高性能网站建设指南》

转载于:https://www.cnblogs.com/wlxll/p/5952101.html