<?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>Moondy’s Zone &#187; yslow</title>
	<atom:link href="http://www.moondyzone.com/tag/yslow/feed" rel="self" type="application/rss+xml" />
	<link>http://www.moondyzone.com</link>
	<description>一位IT民工的点点滴滴……  WEB前端、网页重构、AS3</description>
	<lastBuildDate>Mon, 18 Apr 2011 10:06:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.moondyzone.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>新版本Yslow 22项评分标准</title>
		<link>http://www.moondyzone.com/css/481.html</link>
		<comments>http://www.moondyzone.com/css/481.html#comments</comments>
		<pubDate>Fri, 26 Jun 2009 08:24:23 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[yslow]]></category>
		<category><![CDATA[优化]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=481</guid>
		<description><![CDATA[对于一个WEB前端工作者来说，Yslow绝对是一款必不可少的性能优化工具，可以方便地查出是哪些因素影响了你的网页性能。

新版本的Yslow共有22条指标，比原来的多了9条。还可以自定义规则，新版本Yslow有三个内置的规则：V2、V1、小型站和博客，V2的指标最多，包括所有22项指标，而V1则只包括上一个版本的13条指标。你可以完全设置自己的规则，这样就可以比较灵活，也更客观实际的分析自己的网站。另外，还增加了一些网站的优化工具，比如Smush.it、JS Minified、 JS Beautified等等。
在这里我只列举一下新增的那9条指标了，其它的可以看另一篇网站优化——Yslow评分标准。由于是本人自行翻译的，如有错漏还请达人指出。
Make AJAX cacheable
设置AJAX的缓存。当前AJAX的应用越来越广泛，AJAX的信息读取是异步的，这也表示用户不一定会等待这异步的响应，为避免重复的AJAX请求，设置缓存是优化性能的一个好方法。
Use GET for AJAX requests
用GET获取AJAX请求。又是一条有关AJAX的。AJAX的传值可用GET跟POST，在这里建议使用的是GET。
Reduce the number of DOM elements
减少页面DOM节点。也就是讲究页面代码的简洁，一个复杂的页面不仅增大页面的体积，也会对JavaScript访问DOM元素产生影响。
Avoid HTTP 404 (Not Found) error
避免404错误页面的出现。这个应该不用怎么解释了，不管从服务器资源还是用户体验上来说，都是不好的。
Reduce cookie size
减少cookie的大小。cookie一般用于身份验证等用途，一般说来cookie被限制在4K以内，尽量控制 Cookie 的大小，不要塞入一些无用的信息。
Use cookie-free domains
使用域名无关性的Cookie。这里是有关静态服务器的问题，主要是指一些静态文件比如说图片、CSS等等，比如说YAHOO，他的静态文件都在 yimg.com 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。
Avoid AlphaImageLoader filter
避免AlphaImageLoader滤镜的使用。这个几乎都是用在IE6下解决PNG透明的问题上的。而为了实现此效果而牺牲的性能来说，是很不合算的。
Do not scale images in HTML
不要对图片进行缩放。也就是图片的实际大小大于他的显示必要，比如一个800*600的图片，而我们在页面上只显示的是400*300的大小，那么这便是一种服务器资源的浪费。
Make favicon small and cacheable
使图标尽可能小，并使用缓存。这里指的是favicon.ico了，设置favicon.ico缓存可以避免频繁的页面请求。
相关文章网站优化——Yslow评分标准]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/481.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网站优化——Yslow评分标准</title>
		<link>http://www.moondyzone.com/css/279.html</link>
		<comments>http://www.moondyzone.com/css/279.html#comments</comments>
		<pubDate>Sat, 25 Apr 2009 08:37:40 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[yslow]]></category>
		<category><![CDATA[优化]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=279</guid>
		<description><![CDATA[YSlow 是Yahoo开发者团队发布的一款基于Firebug的插件。Yshow=why slow?是用于用于分析网页，并根据一些高性能网站的规则进行相应的评级打分，对于网页性能优化有很好的帮助作用，告诉你那些部分影响了你的网页速度。
今天用Yslow评了一下我前不久做的一个站的页面，结果是73分。

这里一共有13条主要规则，而想要满足这13条规则达到网站速度的最佳优化，并不是一个WEB前端技术员能独立完成的。其中第2、3、4及13条，需要网络服务器相关的技术来解决，这也是我这页面评分不高的原因了。下面具体来说明一下这13条规则：
1、Make fewer HTTP requests&#8211;更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片。
        80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。要做到这一点有很多方法，比如使用CSS Sprites整合图片、合并CSS文件（不需要划分为什么色彩样式、布局样式、文字样式之类的）、合并JS文件。
2、Use a CDN&#8211;使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上。
        这是有关服务器线路的问题，我也不是太了解，放在国内的话大体上也就是电信、网通、双线、多线的意思了。
3、Add an Expires header&#8211;为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站。
        设置静态文件的过期时间，最开始的时候我找了好久也没找到这个过期时间要怎么加，原来这个也不属于前端人员的范畴，找服务器管理人员去了解下吧。
4、Gzip components&#8211;压缩静态资源内容，减少网络传输时间。
        这个应该很熟悉了，Gzip的思想就是把文件先在服务器端进行压缩，然后再传输，在客户端再进行解压。对于当前的PC机配置来说，这点点的解压工程实在是微乎其微。不过跟上一条一样，也是属于服务器管理人员的范畴了。
5、Put CSS at the top&#8211;将CSS放在页面头部，能够更快渲染页面。
        这个很容易理解，而且绝大部分人也都会这么做的。无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。
6、Put JS at the bottom&#8211;将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载。
        跟上一条一样，很多人都习惯了把JS也放在头部，这样不仅会阻塞其它资源的下载，而且JS一般都是用来交互的，如果页面都还没有出来，何来的交互呢？所以JS还是要放到底部加载。
7、Avoid CSS expressions&#8211;不要使用CSS表达式，因为CSS表达式需要很多资源，有时甚至会造成页面假死。
        expressions其实就像是其它语言中的if……else……可以在CSS中进行逻辑判断，但是这样的代价是非常大的，曾经我为了满足IE6下的图片大小自适应用了这么个语句，结果页面慢如蜗牛。
8、Make JS and CSS external&#8211;将CSS和JS使用外部的独立文件。
        看起来跟第1条有点矛盾，不过这应该看具体情况了。javascript和css都有缓存，独立成外部文件的话，有利于提高用户再次访问时的效率。而某些大站比如yahoo，会把CSS及JS都写在页面里，那是因为访问量太大，尽可能的减少请求数。如果你的网站访问量还不是那么地惊人的话，还是独立出来比较好。
9、Reduce DNS lookups&#8211;减少DNS查找。
        这一点虽然也是服务器方面的问题，不过还是很好理解。也就是说不要把同一个网站的内容分散在不同的服务器上。比如说，一个图片站，因为空间大小的关系把某一部分图片放在了另一个服务器上，那么这一部分的图片在浏览的时候就会慢很多。
10、Minify JS&#8211;最小化压缩JS，减少JavaScript和CSS文件的体积。
        这个应该见得多了，我们应该经常会见到被压成一行的JS以及CSS文件，压缩工具在网上随处都可见。
11、Avoid redirects&#8211;避免无意义的跳转。
        这里有一种现象常常会被开发者所忽略，这种现象发生在当URL本该有斜杠（/）却被忽略掉时，这时候会返回一个301的状态码，然后浏览器重新发起一次请求，这其中就浪费掉了时间。
12、Remove duplicate scripts&#8211;去除重复的脚本，不光是文件，甚至是同功能的函数。
       这个道理很浅显，我想也不用说明太多了。
13、Configure ETags&#8211;配置实体标签。
        Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这也是服务器人员的工作范畴，有兴趣的可以了解下。
后记，其实写这文章之前，有很多概念都是模模糊糊的，所以也查阅了很多资料。不过现在都清晰啦，这也是一种不错的学习方法呢。
相关文章新版本Yslow 22项评分标准CSS3测试之——QQ企鹅斜角导航及滑动门的延伸a:hover在IE6中的BUG对CSS渲染效率的一些研究解决IE8的兼容问题，X-UA-Compatible meta标签]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/279.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

