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

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

规则一 减少HTTP请求

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

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

• 图片地图

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

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

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

• 内联图片

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

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