<?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>nan.im &#187; Yahoo! 雅虎</title>
	<atom:link href="http://nan.im/blog/tags/yahoo/feed" rel="self" type="application/rss+xml" />
	<link>http://nan.im/blog</link>
	<description></description>
	<lastBuildDate>Sat, 28 Jan 2012 05:58:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>YQL &#8211; Yahoo! Query Language 以不变应万变的数据与内容获取方式</title>
		<link>http://nan.im/blog/1313</link>
		<comments>http://nan.im/blog/1313#comments</comments>
		<pubDate>Wed, 06 Oct 2010 01:14:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[JavaScript JS]]></category>
		<category><![CDATA[Yahoo! 雅虎]]></category>
		<category><![CDATA[YQL]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1313</guid>
		<description><![CDATA[Yahoo! 的开发者们总能一次又一次的带给我们惊喜，这次是 Yahoo! Query Language 雅虎查询语言（YQL）是由雅虎提供的一种类 SQL 语法，借助雅虎强大的云计算能力 YQL 仅使用一行或者几行代码就能够轻松的进行跨域跨服务的查询和过滤以获取内容和数据，而且速度也绝对让开发者满意。 举个例子是我可以用诸如（select * from flickr.photos.search where text=”apple” limit 9）的语句得到 flickr 上关于 apple 的 9 条数据，返回结果为 XML 或 JSON 而引用方法只是将以上语句做为参数即 URL 的一部分直接向 YQL 请求即可，当然看似与 xQuery GQL SimpleDB 等查询类似却潜力无限，试想既然可以拓展到跨域及跨服务，那么无论你需要地图支持、搜索支持、图片支持、天气甚至股票等等将均可以从 YQL 获取而不需要自己去学习一套又一套的私有接口，雅虎 YQL 为我们获取数据和内容提供了一个“以不变应万变”的中间层…… 雅虎 YQL 模型 YQL：http://developer.yahoo.com/yql/ YQL Guide：http://developer.yahoo.com/yql/guide/ YQL Console：http://developer.yahoo.com/yql/console/ 以上是雅虎 YQL 的模型及项目网站及手册和调试地址，随着 Web 2.0 服务的越来越多，各个网站所提供的开放 API [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://yahoo.com/">Yahoo!</a> 的开发者们总能一次又一次的带给我们惊喜，这次是 <a href="http://developer.yahoo.com/yql/">Yahoo! Query Language</a> 雅虎查询语言（YQL）是由雅虎提供的一种类 SQL 语法，借助雅虎强大的云计算能力 YQL 仅使用一行或者几行代码就能够轻松的进行跨域跨服务的查询和过滤以获取内容和数据，而且速度也绝对让开发者满意。</p>
<p>举个例子是我可以用诸如（select * from flickr.photos.search where text=”apple” limit 9）的语句得到 flickr 上关于 apple 的 9 条数据，返回结果为 XML 或 JSON 而引用方法只是将以上语句做为参数即 URL 的一部分直接向 YQL 请求即可，当然看似与 xQuery GQL SimpleDB 等查询类似却潜力无限，试想既然可以拓展到跨域及跨服务，那么无论你需要地图支持、搜索支持、图片支持、天气甚至股票等等将均可以从 YQL 获取而不需要自己去学习一套又一套的私有接口，雅虎 YQL 为我们获取数据和内容提供了一个“以不变应万变”的中间层……<span id="more-1313"></span></p>
<p><center><img src="http://anyLiv.com/blog/wp-content/uploads/YQL-Model.jpg" alt="" title="YQL-Model" width="577" height="217" class="aligncenter size-full wp-image-1317" /><br />雅虎 YQL 模型</center></p>
<blockquote><p>YQL：<a href="http://developer.yahoo.com/yql/">http://developer.yahoo.com/yql/</a></p>
<p>YQL Guide：<a href="http://developer.yahoo.com/yql/guide/">http://developer.yahoo.com/yql/guide/</a></p>
<p>YQL Console：<a href="http://developer.yahoo.com/yql/console/">http://developer.yahoo.com/yql/console/</a></p></blockquote>
<p>以上是雅虎 YQL 的模型及项目网站及手册和调试地址，随着 Web 2.0 服务的越来越多，各个网站所提供的开放 API 也越来越多，开发者如果需要借助这些 API 进行开发就必须重新学习及掌握这些 API 需要地图服务就得看看地图的 API 文档需要搜索支持就又得去学习搜索的 API 等学会了 Google 的又发现需要 Twitter 的，而雅虎 YQL 就为我们提供了解决这样一个问题的中间层，这对于开发人员特别是前端开发人员将意义重大，下面是来自阿里 UED 博客上的一个简单示例：</p>
<pre lang="html4strict" line="1">
<script>
function loveData(r){
	var results = r.query.results;
	alert(results);
}
</script>
<script src="http://query.yahooapis.com/v1/public/yql?q=select * from flickr.photos.search&#038;format=json&#038;callback=loveData"></script>
</pre>
<p>由于篇幅我隐掉了查询语句中的 where 和 limit 部分以帮助大家简单理解 YQL 的一种用法，在新版的 YUI 3.2 中已经加入了 YQL 的组件可以通过 YUI().use(&#8216;yql&#8217;, function(){}); 来直接进行调用，可以看得出来使用还是非常方便的，另外你甚至可以向 YQL 提供你自己的数据产品以拓展 YQL 的能力，一旦被 YQL 接纳，那么你的数据将会为千万开发者所用。</p>
<p>再举一个简单的例子：比如我想抓取某个网页的主要内容部分，很多人会采用正则按照特定的规则来摘取页面的 html 代码，但我是个极其喜欢偷懒的人，我希望直接抓出其在自己的 feed 里面的主要内容，通常在 feed content 里的内容都是某个页面的主要内容如下：</p>
<pre lang="sql" line="1">
SELECT * FROM feed
WHERE url IN (
    SELECT href FROM html
    WHERE url="http://anyLiv.com/blog/1313"
    AND xpath="//link[@type='application/rss+xml']" LIMIT 1
)
AND link = "http://anyLiv.com/blog/1313"
</pre>
<p>（<a href="http://y.ahoo.it/If7ZJaYJ">查看运行结果</a>）</p>
<p>我用了一个子 SELECT 来获取这个页面的 feed 地址，有点绕性能也不好但无所谓交给 Yahoo! 处理就好，因为在 YQL FEED 表里 url 是唯一的必选参数，所以我得先知道当前页面的 feed 地址是什麽然后再用地址去筛选一下获得页面的 content 还是相当方便的！</p>
<p>雅虎 YQL 查询语言通过提供类 SQL 语法消除了开发人员学习大量 API 的麻烦，节约了开发时间和学习成本，依托雅虎 YQL 的稳定和高效，使更多的开发者拥有无比强大的数据获取及计算能力，这将帮助我们更方便快捷高效的创造更多更好的互联网产品……</p>
<p>拓展阅读：<a href="http://www.aliued.cn/?p=2728">阿里 UED 关于 YQL 介绍</a></p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1313/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>如何达到 Yahoo! ySlow GradeA 速度指标（二）</title>
		<link>http://nan.im/blog/1111</link>
		<comments>http://nan.im/blog/1111#comments</comments>
		<pubDate>Tue, 15 Sep 2009 05:26:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Search Engine Optimization（SEO）搜索引擎优化]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Yahoo! 雅虎]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1111</guid>
		<description><![CDATA[上篇文章针对 ySlow 的前 7 项指标做了说明，这里继续后面的 7 项指标。虽然网页显示速度对于 SEO 或许意义没有那么重大，但对于用户体验却十分有意义，有统计表明网页如果在 5 秒钟内没有下载完成则会丢失一半以上的用户，之后下载时间与用户流失成指数比例增长。这里将继续补充 ySlow 在 Small Site or Blog 标准下的后 7 项指标解释及如何达到 GradeA 指标…… 这里继续描述剩下的 ySlow 技术指标： 8、Avoid URL redirects 避免 URL 跳转：避免网址跳转，如一些较旧的站点喜欢做网站的引导页，然后里面加上例如 http-equiv=”refresh” 的 meta 标签用来跳转到默认栏目等等。如果刷新时间过短这种方式甚至会被搜索引擎认为作弊对于 SEO 也同样不利。 具体措施：如果因为网站文件结构变化或其他栏目变化而需要改变旧的链接地址可使用 301 重定向或 简洁链接 解决。 9、Remove duplicate JavaScript and CSS 移除重复代码：随着网站代码的积累，或多个开发人员的共同协作，不可避免在代码里面会出现一些重复代码，最为常见的就是 CSS 的重复定义，甚至 JavaScript 中也有可能出现函数的重复问题。 具体措施：在修改 CSS 或 [...]]]></description>
			<content:encoded><![CDATA[<p>上篇文章针对 ySlow 的前 7 项指标做了说明，这里继续后面的 7 项指标。虽然网页显示速度对于 SEO 或许意义没有那么重大，但对于用户体验却十分有意义，有统计表明网页如果在 5 秒钟内没有下载完成则会丢失一半以上的用户，之后下载时间与用户流失成指数比例增长。这里将继续补充 ySlow 在 Small Site or Blog 标准下的后 7 项指标解释及如何达到 GradeA 指标……</p>
<p><span id="more-1111"></span></p>
<p><center><a href="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a.png" rel="shadowbox[sbpost-1111];player=img;" title="yslow-grade-a"><img src="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a-322x225.png" alt="yslow-grade-a" title="yslow-grade-a" width="322" height="225" class="aligncenter size-thumbnail wp-image-1111" /></a></center></p>
<p>这里继续描述剩下的 ySlow 技术指标：</p>
<p> 8、<strong>Avoid URL redirects</strong></p>
<p>避免 URL 跳转：避免网址跳转，如一些较旧的站点喜欢做网站的引导页，然后里面加上例如 http-equiv=”refresh” 的 meta 标签用来跳转到默认栏目等等。如果刷新时间过短这种方式甚至会被搜索引擎认为作弊对于 SEO 也同样不利。</p>
<p>具体措施：如果因为网站文件结构变化或其他栏目变化而需要改变旧的链接地址可使用 301 重定向或 简洁链接 解决。</p>
<p> 9、<strong>Remove duplicate JavaScript and CSS</strong></p>
<p>移除重复代码：随着网站代码的积累，或多个开发人员的共同协作，不可避免在代码里面会出现一些重复代码，最为常见的就是 CSS 的重复定义，甚至 JavaScript 中也有可能出现函数的重复问题。</p>
<p>具体措施：在修改 CSS 或 JS 文件时务必删除旧的部分，不要一直在后面累加代码，添加新代码的同时需要删除旧的重复代码。</p>
<p>10、<strong>Reduce the number of DOM elements</strong></p>
<p>减少 DOM 元素：减少文档对象模型（DOM）数量，这其实也是一种提高页面信息熵的手段，通常大小的页面其有用信息内容所占比例越高，页面信息熵也越高对于 SEO 非常有用，同时也意味着用最少的 DOM 节点数量实现需要的效果。</p>
<p>具体措施：减少 DOM 元素需要 HTML 和 CSS 经验的积累，实现同样的视觉效果必定不止一种两种方法，但哪种方法使用的 DOM 节点最少就需要长时间经验的积累。</p>
<p>11、<strong>Avoid HTTP 404 (Not Found) error</strong></p>
<p>避免 404 错误：所谓 404 页面错误通常是浏览器访问不存在的页面时服务器返回的错误代码，在正常浏览中这种情况是不应该出现的。</p>
<p>具体措施：一旦网站成型开始内容填充，就不要轻易改变网站 URL 结构，特别是对于搜索引擎已抓取的页面，修改 URL 地址时务必使用 301 重定向代码导向正常的页面，尽量修改页面内容而不是删除。</p>
<p>12、<strong>Avoid AlphaImageLoader filter</strong></p>
<p>避免 AlphaImage 滤镜：道理跟前面的第五条类似，由于 CSS 滤镜属性只有 IE 浏览器支持且需要消耗较多浏览器资源。</p>
<p>具体措施：删除所有 CSS 滤镜，替换为图片背景或符合 W3C 的 CSS 属性。</p>
<p>13、<strong>Do not scale images in HTML</strong></p>
<p>禁止在缩放图片：在页面 HTML 里应禁止缩放图片，其实在页面结构修饰部分是不推荐使用 img 标签插入图片的，当然更不用说是缩放。这样会导致你的页面下载多余的文件流。</p>
<p>具体措施：基于用多大的图片就做多大思想，尽量避免在 html 中插入 img 图片，修饰部分尽量使用 CSS 背景来出效果。</p>
<p>14、<strong>Make favicon small and cacheable</strong></p>
<p>制作小的缓存图标：浏览器通常会对服务器跟目录请求 favicon.ico 图标，如果没有将出现一个 404 错误见前面 11 条。</p>
<p>具体措施：由于 favicon.ico 将做为 cookie 存储，更小的 cookie 将减少服务器和客户端对 cookie 的浏览。使用专业的图标及图片优化工具，使用压缩的文件格式处理等等方法都可以大大减小图标文件的大小。</p>
<p>至此，关于 Yahoo! ySlow 里面 Small Site or Blog 标准里面的 14 项指标全部介绍完毕，这也是提高网站速度最基本的 14 项措施，在以后的文章里将继续介绍用于 Classic v1 标准及 ySlow v2 标准的其他一些指标，这些指标对于中大型网站将非常有用。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1111/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何达到 Yahoo! ySlow GradeA 速度指标（一）</title>
		<link>http://nan.im/blog/1108</link>
		<comments>http://nan.im/blog/1108#comments</comments>
		<pubDate>Mon, 14 Sep 2009 09:49:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Search Engine Optimization（SEO）搜索引擎优化]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Yahoo! 雅虎]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1108</guid>
		<description><![CDATA[Yahoo! YSlow 是一个由 Yahoo! 雅虎开发的 Firebug 插件，其实通过这个名字就知道这款插件是干嘛的即 Y(why)Slow 名字起的太好了 ySlow 可以通过分析网页内各项资源的加载情况对三类网页进行评级，并提供一些非常有用的建议，目前主要被用来测试网站加载速度及获得网页提速建议。记得这个小站刚开播的时候是 GradeC 后来简单调了一下到了 GradeB 今天终于下决心冲一下 GradeA 重写了几乎三分之一的代码和图片，终于功夫不负有心人不仅整体达到 GradeA 级别，并且所有的 14 项指标也均为 GradeA 评级 Overall performance score 99 分，那么如何能顺利达到这个指标呢，这里将分别从 14 项内容简单描述一下…… 先截图留个纪念吧…… 但这个 GradeA 仍然是 Small Site or Blog 标准下的 GradeA 另外其它另外的两个标准 Classic 和 YSlow2 目前仍然是 GradeC 级别，单就里面 CDN 这一项个人网站就没有办法克服，但本站本来就是 Blog 嘛理应还是用 Blog 的标准衡量的，下面就分别以这 14 个指标简单解释一下，其中的一些内容我们不需要了解其原理，因为浏览器都是图形界面的，我们通常不了解在这华丽的背后发生的事情，这是网络协议的范畴…… [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://developer.yahoo.com/yslow/"><strong>Yahoo! YSlow</strong></a> 是一个由 Yahoo! 雅虎开发的 Firebug 插件，其实通过这个名字就知道这款插件是干嘛的即 Y(why)Slow 名字起的太好了 ySlow 可以通过分析网页内各项资源的加载情况对三类网页进行评级，并提供一些非常有用的建议，目前主要被用来测试网站加载速度及获得网页提速建议。记得这个小站刚开播的时候是 GradeC 后来简单调了一下到了 GradeB 今天终于下决心冲一下 GradeA 重写了几乎三分之一的代码和图片，终于功夫不负有心人不仅整体达到 GradeA 级别，并且所有的 14 项指标也均为 GradeA 评级 Overall performance score 99 分，那么如何能顺利达到这个指标呢，这里将分别从 14 项内容简单描述一下……</p>
<p><span id="more-1108"></span></p>
<p>先截图留个纪念吧……</p>
<p><center><a href="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a.png" rel="shadowbox[sbpost-1108];player=img;" title="yslow-grade-a"><img src="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a-322x225.png" alt="yslow-grade-a" title="yslow-grade-a" width="322" height="225" class="aligncenter size-thumbnail wp-image-1109" /></a></center></p>
<p>但这个 GradeA 仍然是 Small Site or Blog 标准下的 GradeA 另外其它另外的两个标准 Classic 和 YSlow2 目前仍然是 GradeC 级别，单就里面 CDN 这一项个人网站就没有办法克服，但本站本来就是 Blog 嘛理应还是用 Blog 的标准衡量的，下面就分别以这 14 个指标简单解释一下，其中的一些内容我们不需要了解其原理，因为浏览器都是图形界面的，我们通常不了解在这华丽的背后发生的事情，这是网络协议的范畴……</p>
<p> 1、<strong>Make fewer HTTP requests</strong></p>
<p>减少 HTTP 请求：浏览器打开页面并与服务器的 IP 地址建立 TCP 链接之后就会开始发送 HTTP 请求来下载页面上相关文件及元素，通常每个文件（外部样式 外部脚本 图片 等等）都需要浏览器发送一次 HTTP 请求。而建立 HTTP 请求是需要时间和带宽开销的，在 56Kbps 时代网络带宽很小，我们通常需要将大图切割成小图来多次下载以减少每个图片从下载到显示的时间；而目前的宽带时代则需要通过减少 HTTP 链接次数来减少网页加载时间。</p>
<p>具体措施：合并文件以达到减少 HTTP 请求次数的目的如：合并多个 CSS 文件到一个文件；合并多个 js 脚本到一个脚本文件；合并全部背景图片使用 CSS Sprites 技术等。</p>
<p> 2、<strong>Compress components with gzip</strong></p>
<p>使用 gZip 压缩：这种压缩技术存在于 服务器 和 浏览器 之间，首先浏览器在请求 URL 地址时会包含是否支持 gZip 的信息头，如果支持服务器将对网页文件流进行压缩（这种压缩通常能到源文件的 1/10 ~ 3/10 从而节约 70% 的下载时间）；如果浏览器不支持则发送未压缩的文件流给浏览器。这种压缩下载应该是目前提高网页下载速度最为有效的方式之一。</p>
<p>具体措施：需要咨询你的服务器托管维护人员或虚拟主机供应商，服务器端配置开启 gZip 压缩，必要时安装第三方功能及模块，但某些情况下 IE6 对这项技术的支持并不尽人意。</p>
<p> 3、<strong>Put CSS at top</strong></p>
<p>页头 CSS 文件：将引入 CSS 样式表的代码移至页头 head 标签内将有助于页面渲染逐步加快，也可避免代码先于样式表完成下载造成的无样式页面。</p>
<p>具体措施：使用 link 标签引入 CSS 样式表并限定设备类型，这样可避免其他设备下载并可在客户端缓冲 CSS 文件从而加快二次浏览速度。</p>
<p> 4、<strong>Put JavaScript at bottom</strong></p>
<p>页脚 JS 文件：将引入 JavaScript 脚本文件的代码移至页脚，可避免由于下载 js 文件而耽误页面主体内容的下载进度，通常 js 脚本都用来处理用户行为，所以也应该在页面加载完成之后再后台下载。</p>
<p>具体措施：使用 script 标签引入 JavaScript 脚本的代码放到 body 标签或 html 标签之前即可，另外尽量不要在页面中出现 js 内容，而是把所有脚本放在一个 js 文件中引入，也可以缓存从而加快二次浏览速度。</p>
<p> 5、<strong>Avoid CSS expressions</strong></p>
<p>避免 CSS 脚本：在 IE 浏览器中可以使用 filter 这个 IE 私有的 CSS 属性来在样式表文件中实现 js 脚本的一些功能，但这样做的代价是巨大的，在丧失浏览器兼容性的同时也会浪费大量系统资源，因为 IE 浏览器在渲染 filter 属性的时候不仅是页面缩放甚至滚动页面、鼠标移动的同时都需要重新计算 filter 值，所以在 CSS 中使用表达式（Expressions）是可怕的。</p>
<p>具体措施：删除 CSS 样式表中所有的 filter 属性使用标准的 W3C 样式表属性代替，实在需要设置变量值的可以在 js 文件中编写脚本实现。</p>
<p> 6、<strong>Reduce DNS lookups</strong></p>
<p>减少 DNS 查询：所谓 DNS 查询就是浏览器从 DNS 服务器查询域名获取 IP 地址的过程。通常这种情况出现于网页内有出现其他域的文件，比如在域 anyLiv.com 下的网页如果添加了 谷歌分析 统计代码就会增加一次到 www.google-analytics.com 的 DNS 查询。</p>
<p>具体措施：尽量在网站本域下放置所有的网页文件及代码，这样整个页面只需要一次 DNS 查询就足够了。但并不是说绝对如此，如果在大型网站使用 Content Delivery Network（CDN）内容分发网络 的话即使会有 DNS 查询，但仍然会提高页面总体下载速度。</p>
<p> 7、<strong>Minify JavaScript and CSS</strong></p>
<p>压缩 JS CSS 文件：网页文件的大小非常直接的反映在页面下载时间上，这里的压缩是指文件本身的压缩，不同于前面服务器端的 gZip 压缩。</p>
<p>具体措施：从文件中删除不必要的字符如多余的空格符 换行符 跳格符 注释 等内容以达到减少页面体积缩短下载时间的目的。</p>
<p>今天就先到这，欲知后事如何，请看下集《<a href="http://anyliv.com/blog/1111.html">如何达到 Yahoo! ySlow GradeA 速度指标（二）</a>》……</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1108/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

