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

这本书的绪言讲得很好，对于网站来讲，页面从发送请求到看到页面，只有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请求的次数并缩短最终用户响应时间。