小知识你不知道的技术

web网站性能优化-1、减少Http请求

2019-08-05  本文已影响153人  小小_绿

1、减少Http请求

1)、图片地图 Image Maps

在导航栏中或其他超链接中使用多张图片,可以采用图片地图,一张图片代替多张图片,通过坐标识别判断点击事件,从而减少Http开销

图片地图中的图片必须是连续的

2)、CSS sprites 雪碧图

    CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。3)、内联图片

<img src="data:image/png;base64,iVBOR....>data - 取得数据的协定名称

 image/png - 数据类型名称       base64 - 数据的编码方法       iUANR.... - 编码后的数据       : , ; - data URI scheme 指定的分隔符号

优点:

        I、减少http请求次数

  II、做为背景平铺类的图片使用内联图片的话,减少http请求次数,并且不会影响加载速度

内联图片的缺点

  I、浏览器不会缓存内联图片资源

  II、兼容性较差,只支持ie8以上浏览器

  III、超过1000kb的图片,base64编码会使图片大小增大,导致网页整体下载速度减慢

4)、合并脚本、样式表

减少脚本、样式表请求次数

5)、icon可采用字体图标

上一篇下一篇

猜你喜欢

热点阅读