网站代码优化 减少HTTP请求

为什么要减少HTTP请求

只有10%-20%的最终用户响应时间花在请求HTML文档上,剩下的80%-90%的时间花在了HTML文档所引用组件(图片 js css flash)进行的HTTP请求上
查找DNS缓存也需要时间,多个缓存就要查找多次有可能缓存会被清楚
HTTP协议规定只能串行发送,也就是说一百个请求必须依次逐个发送,当前面的一个请求完成后才开始下个请求

如何改善

改善HTTP响应时间的最简单有效的方法是减少组件的数量,并由此减少HTTP请求

CSS Sprites

CSS Spites 中文翻译CSS精灵,通过使用合并图片,通过指定的css的background-image和background-position来显示元素
bacground -position:x y;x和y可以写负值也可以写正直,图片左上角为(0,0),以(0,0)坐标向右是为负数的X轴,向下是为负数的Y轴

图片地图

图片地图允许你在一个图片上关联多个url,目标url的选择取决于用户点击了图片上的那个位置
将五个分开的图片合并成一张图片,然后以位置信息定位超链接
把http请求减少为1个,可以保证设计的完整性和功能的齐全性

性能影响

图片地图合萼CSS精灵的响应时间基本上相同,但比使用各自独立的图片方式快了50%以上
合并脚本和CSS样式

合并JavaScript和CSS

使用外部的js和css文件引用的方式,因为这样比直接写在页面中要更好一点
独立的一个jss比用多个js文件组成的页面载入快了38%

使用Base64编码

采用Base64编码将图片直接嵌入到网页中,而不是从外部载入

<img src='data:image/gifl'>
赞(3) 打赏
特别声明:除特殊标注,本站文章均为原创,遵循CC BY-NC 3.0,转载请注明出处。三伏磨 » 网站代码优化 减少HTTP请求

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏