Li Yue [学习笔记]

　　在YSlow性能分析的第一条标准就是“Make fewer HTTP requests”。网站的响应时间大部分花费在前端，浏览器从服务器下载images、js 、flash等文件。在保持内容不变的情况下，首要做的就是减少浏览器请求文件的数量，网页中每个图标文件都需要发生一次请求。http协议是建立在请求/响应模式下的，浏览器发送请求信息（包括请求方法、URI、版本号等客户端信息）给服务器，服务器返回状态码，服务器信息、实体内容等。整个过程应该是首先浏览器和服务器先建立一个socket连接，然后客户端发送请求、服务器响应，关闭连接。默认情况是一个socket连接只能发生一次请求。那样的话，要打开一个网页，就可能重复上面的（连接、请求、响应、关闭连接）的过程N次，非常耗时。所以，在WEB服务器上可以进行配置可以使socket连接在一定时间内允许进行多个请求。例如，apache中的KeepAlive 设置为On时就可以。

 　　在这基础上，再减少资源的数目，方法是将资源合并。CSS文件尽量外连，并合并到一个.css文件中，不同的用途之间可以用注释分隔符隔开区分。js文件同样是，图片可以采用CSS Sprites方法将小图合并到一张大图中，利用css定位，根据需要显示大图中的部分图像。例如，下面的导航菜单，当鼠标移动到菜单项，会显示不同的颜色的图片，而当前页又会显示另外一个颜色的图片。传统做法是做三个不同状态的图片，配合js切换。

　　按照CSS Sprites方法，三个状态图片合并到一张图： 常态下，只显示上面的图片，当鼠标hover的时候，样式如下

 li a:hover span {background-position: 0 -26px; border-bottom-color: #5f5f5f;}

图像的Y轴坐标上移26px（每个小图的高度正好是26px）,显示的是中间的图。当前页的时候，显示下面图：

 li.selected a:hover span {background-position: bottom left;}

　　图像的处理还有一种就是maps，在一张大图上，做热区连接，但是不推荐。

 　　本节只有CSS Sprites有些技术含量，其他的应该是工作习惯。