<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Li Yue [学习笔记] &#187; css</title>
	<atom:link href="http://www.liyue.org/tech/archives/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.liyue.org/tech</link>
	<description>技术笔记</description>
	<lastBuildDate>Sun, 18 Jul 2010 02:14:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>高性能Web Site与YSlow（2）-Make fewer HTTP requests</title>
		<link>http://www.liyue.org/tech/archives/155</link>
		<comments>http://www.liyue.org/tech/archives/155#comments</comments>
		<pubDate>Fri, 20 Feb 2009 08:20:45 +0000</pubDate>
		<dc:creator>李悦</dc:creator>
				<category><![CDATA[web优化]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[yslow]]></category>

		<guid isPermaLink="false">http://www.liyue.org/tech/?p=155</guid>
		<description><![CDATA[　　在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 &#123;background-position: 0 -26px; border-bottom-color: #5f5f5f;&#125; 图像的Y轴坐标上移26px（每个小图的高度正好是26px）,显示的是中间的图。当前页的时候，显示下面图： li.selected a:hover span &#123;background-position: bottom left;&#125; 　　图像的处理还有一种就是maps，在一张大图上，做热区连接，但是不推荐。  　　本节只有CSS Sprites有些技术含量，其他的应该是工作习惯。]]></description>
		<wfw:commentRss>http://www.liyue.org/tech/archives/155/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
