CSS Sprite提升 降低HTTP连接数

2021-01-20 15:30 jianzhan

网页页面上的数据信息,根据 TCP/IP 包传送。在 1M ADSL 自然环境下,网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的尺寸默认设置为 1500 bytes. 去掉 TCP/IP 的头顶部信息内容 40 bytes, 1个 package 能够容下的文档尺寸为 1460 bytes. 下面是1张示用意:

必须的包越少,代表着速率越快。

事例:淘宝主页有1张 sprite: hd_20090313.png, 尺寸为 5.71 KB (5848 bytes). 必须 5 个包来传送(5848 / 1460 = 4.005)。看数据信息,只多出了 8 bytes. 提升到 5840 bytes 后,便可以降低1个传送包。

或许挑毛病了,但针对重要网页页面,任何细节提升,有时全是值得的。

相近的,针对网页页面中的连接数量,还可以考虑到访问器的最大高并发数来做细节提升。例如,在 Firefox 下,同1个 host 的最大高并发数为 6, 提升连接数对免费下载時间的危害以下:

当连接数从 6 的整数金额倍增 1 时,免费下载時间显著增大。考虑到 IE6 最大高并发数是 2, 降低连接数时,尽可能降低到偶数,是1个非常好的提升守则。

参照材料

  • CSS Sprites: Image Slicing’s Kiss of Death
  • CSS, Image Sprites, Background Images and Website Optimization

PS: 出1道题型考考大伙儿:CSS Sprite 的缺陷是甚么?