高性能网站建设指南读书笔记（一）

这本书的绪言讲得很好&＃xff0c;对于网站来说&＃xff0c;页面从发送请求到看到页面&＃xff0c;只有10%~20%的时间是花在Web服务器获取HTML文档并且传输到浏览器的&＃xff0c;剩余的80%~90%的工作都是前端部分来做的&＃xff0c;作为一个前端开发人员&＃xff0c;与其希望后台提升效率&＃xff0c;不如自己通过一些方法来提升前端的效率。作者说&＃xff0c;将这本书的14条规则合理的运用在网站上&＃xff0c;可以节省25%甚至更高的时间&＃xff01;

规则一 减少HTTP请求

性能黄金法则&＃xff1a;最终用户响应时间10%~20%~花费在接受所请求的html文档上&＃xff0c;而其余80%~90%的时间是花费在HTML文档所引用的其他资源&＃xff08;图片、脚本、样式表、Flash等&＃xff09;进行的HTTP请求上&＃xff0c;

减少HTTP请求的数量可以有效的减少请求过多资源花费的时间从而提升性能。

• 图片地图

  这种方法可能很古老了&＃xff0c;现今的浏览器或者网站可能很少用了&＃xff0c;可以去书上看看demo

• CSS Sprites
  CSS Sprites可以将多幅图片拼接成一幅图片&＃xff0c;从而减少请求数量来提升性能。但是CSS Sprites也有缺点&＃xff0c;那就是都不适合大容量图片&＃xff0c;适合小size的多张图片合并。

  其实雪碧图在http1.1以下的版本用处是非常大的&＃xff0c;在 HTTP/1.1 协议中 「浏览器客户端在同一时间&＃xff0c;针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。所以&＃xff0c;很多张图片同时请求&＃xff0c;可能需要分批次请求很多次&＃xff0c;雪碧图很好的解决了这个问题&＃xff0c;而HTTP/2.0采用了多路复用&＃xff0c;取消了网络请求数量这一块的限制。
  
  HTTP/1.1:
  
  HTTP/2.0:
  
  从上面两张图可以看出&＃xff0c;HTTP/1的请求次数是有限制的&＃xff0c;大概同义词只可以发送6个请求左右&＃xff1b;而在HTTP/2下&＃xff0c;几乎所有的请求是同时发出的&＃xff0c;大大提高了性能。

• 内联图片

  优点&＃xff1a;使用data:URL的形式可以在页面中使用图片而无需额外的HTTP请求。
  缺点&＃xff1a;data:URL形式存在兼容性问题&＃xff0c;如低版本的IE浏览器以及过大的图片进行base64编码的同时&＃xff0c;其data&＃xff1a;URL的代码也非常大&＃xff0c;从而虽然节省了HTTP请求&＃xff0c;但是加大了HTML文档的容量。

• 合并脚本和样式表
  每个页面都会额外引用脚本和样式表&＃xff0c;否则就会使用内联脚本和样式表。对于开发和维护的角度来说&＃xff0c;是推荐使用引用样式表的这种形式的&＃xff0c;但是每一个引用又会多一次HTTP请求&＃xff0c;所以&＃xff0c;合理的合并脚本以及样式表&＃xff0c;可以减少HTTP请求的次数并缩短最终用户响应时间。