《高性能网站建设指南》读书笔记一：减少http请求

最近在欧阳的建议下，看了《高性能网站建设指南》这本书，虽然薄薄的120页。但是受益匪浅。接下来分享下学习笔记。首先该书提出了网站的性能黄金法则：
       10%~20%的 最终用户响应时间华仔了下载HTML文档上面，其余80%~90%的时间花在了下载     页面所有的组件上面。


优化方法一：减少 HTTP请求，合并组件（方法包括图片地图 ，css sprites ，内联图片，合并脚本和样式表等）

由黄金法则推断出改善响应时间最简单的途径就是减少组件的数量，并由此减少HTTP请求的数量。

（1）减少图片组件，比较简单而且比较常用的方法是：CSS  Sprites 

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

一个简单的CSS Sprites例子



代码
<div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left top no-repeat”>这里显示红叉</div>   
<div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left -32px no-repeat”>这里显示绿勾</div>   
<div style=“float:left; width:120px; padding-left:20px; background-image:url(ico.png); background-position:left top; background-repeat:no-repeat”>这里显示红叉</div>   
<div style=“float:left; width:120px; padding-left:20px;  background-image:url(ico.png); background-position:0 -32px; background-repeat:no-repeat”>这里显示绿勾</div>

CSS Sprites优点
1.利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.多张图片合并成1张图片的字节总是小于这几张图片的字节总和。

3.利用了css精灵的页面比使用分离图片的站点，要快57%

可能有人会抱怨合成图片很痛苦，还要精确计算，但是在这里我找到一个很好的网站，专门用来帮忙做css精灵图片。

http://csssprites.com/

很好用，只要我们把自己的图片上传上去，就会自动生成我们需要的精灵图片。截图如下

ecjtu.net的首页css 精灵用的也十分恰当。对于页面的提速给力不少！！！

（2）合并脚本和样式表

目前好多网站都使用了javascript和css。再减少http请求的前提下，我们可以适当的把一些脚本或样式表合并，使得性能最大化。