<?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; yslow</title>
	<atom:link href="http://www.liyue.org/tech/archives/tag/yslow/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>
		<item>
		<title>高性能Web Site与YSlow（1）-Gzip</title>
		<link>http://www.liyue.org/tech/archives/114</link>
		<comments>http://www.liyue.org/tech/archives/114#comments</comments>
		<pubDate>Wed, 18 Feb 2009 09:13:54 +0000</pubDate>
		<dc:creator>李悦</dc:creator>
				<category><![CDATA[web优化]]></category>
		<category><![CDATA[yslow]]></category>

		<guid isPermaLink="false">http://www.liyue.org/tech/?p=114</guid>
		<description><![CDATA[　　在FireFox下发现对网站性能评分的好工具YSlow，可以根据网站进行13类别性能评分，等级A-F，A最好，F最差。YSlow下载网址：http://developer.yahoo.com/yslow/，在download按钮下面有个提示：Install Firebug first!，需要先安装Firebug，http://getfirebug.com/，安装完成后，可以在FireFox的状态栏右边，看到YSlow图标，点击后就在浏览器的下半部出现分析窗口。点击上面的Performance，开始对当前网页进行性能分析，给出如下的13项得分： 　　下面是各项性能的评分： 　　项目后面有箭头的，可以点开看看他的建议。先看看第4. Gzip components，Gzip的作用是网页数据在传输给浏览器前，服务器端先压缩，这样可以大大减少网络带宽。Gzip的压缩比很高。在启用Gzip之前，先看看网站是否已经启用了gzip，在下面测试网站可以测试：http://www.whatsmyip.org/mod_gzip_test/ 　　输入网址后，在下面会告诉你是否网站启用了Gzip，如果启用了，可以看到压缩前后的对比，压缩比高达79.59%。下面的一段是测试你的浏览器是否支持Gzip，现在几乎所有的浏览器都支持。如果没有启用，还需要看看服务器是否支持Gzip，可以在站点下建立php测试文件。phpinfo.php，文件内容为，在浏览器访问phpinfo.php，看看有没有Zlib这么一段有就支持。 　　然后就可以通过站点根目录下的.htaccess文件来启用Gzip。打开文件，加入下面一行 AddOutputFilter DEFLATE html xml php js css 　　保存就可以了。 有兴趣的可以看一下，YouTobe上的视频High Performance Web Sites and YSlow ：http://www.youtube.com/watch?v=BTHvs3V8DBA]]></description>
		<wfw:commentRss>http://www.liyue.org/tech/archives/114/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
