Web优化-减少http的请求数量(前端)

  使用Image maps替换多张带有超链接的图片,使用图片地图这种方式可以减少Http请求。实际使用的时,发现加载image maps图片的时间倒是很长,客户端图片地图可以使用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

你可能感兴趣的:(Web优化-减少http的请求数量(前端))