<?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>岁月如歌 &#187; evaluation</title>
	<atom:link href="http://lifesinger.org/blog/tag/evaluation/feed/" rel="self" type="application/rss+xml" />
	<link>http://lifesinger.org/blog</link>
	<description>关注用户体验、前端开发，记录生活点滴、岁月足迹。</description>
	<lastBuildDate>Mon, 06 Sep 2010 15:05:09 +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>The Deferred Evaluation of YUI 3</title>
		<link>http://lifesinger.org/blog/2010/01/the-deferred-evaluation-of-yui3/</link>
		<comments>http://lifesinger.org/blog/2010/01/the-deferred-evaluation-of-yui3/#comments</comments>
		<pubDate>Tue, 12 Jan 2010 02:08:47 +0000</pubDate>
		<dc:creator>lifesinger</dc:creator>
				<category><![CDATA[开发]]></category>
		<category><![CDATA[defer]]></category>
		<category><![CDATA[evaluation]]></category>

		<guid isPermaLink="false">http://lifesinger.org/blog/?p=2391</guid>
		<description><![CDATA[JS 的加载速度，包括下载和运算两部分（参考 JavaScript Library Loading Speed）： Total_Speed = Time_to_Download + Time_to_Evaluate 运算（evaluate）又可细分为解析（parse）和执行（execute）。考虑加载速度时，一般放在一起考虑。 通常来说，下载时间是影响 JS 加载速度的关键。这方面的优化已经很成熟，比如 Compressor, GZip, Cache 等等。 evaluation 部分，目前主要优化方案是延迟（称之 Deferred Evaluation）。具体策略有： 将 JS 代码以注释的形式下载，需要使用时再 parse. 可以参考 GMail for Mobile Team 的研究。 将 JS 代码以字符串定义的形式下载。可以参考 SproutCore Blog 的分析。 将 JS 代码以闭包的形式下载。 第一种策略能将 evaluation 完全延迟，后两种还存在少量未被延迟的 evaluation, 但和第一种差异很小。下面讨论第三种。 YUI 3 YUI 3 的模块定义代码： YUI.add("module-a", function(Y) { [...]]]></description>
			<content:encoded><![CDATA[<p>JS 的加载速度，包括下载和运算两部分（参考 <a href="http://ejohn.org/blog/library-loading-speed/">JavaScript Library Loading Speed</a>）：</p>
<blockquote><p>
Total_Speed = Time_to_Download + Time_to_Evaluate
</p></blockquote>
<p>运算（evaluate）又可细分为解析（parse）和执行（execute）。考虑加载速度时，一般放在一起考虑。</p>
<p>通常来说，下载时间是影响 JS 加载速度的关键。这方面的优化已经很成熟，比如 Compressor, GZip, Cache 等等。</p>
<p>evaluation 部分，目前主要优化方案是延迟（称之 Deferred Evaluation）。具体策略有：</p>
<ol>
<li>将 JS 代码以注释的形式下载，需要使用时再 parse. 可以参考 <a href="http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html">GMail for Mobile Team</a> 的研究。</li>
<li>将 JS 代码以字符串定义的形式下载。可以参考 <a href="http://feedproxy.google.com/~r/Sproutcore-BlogPosts/~3/-0S1tX1vtN0/225219087">SproutCore Blog</a> 的分析。</li>
<li>将 JS 代码以闭包的形式下载。</li>
</ol>
<p>第一种策略能将 evaluation 完全延迟，后两种还存在少量未被延迟的 evaluation, 但和第一种差异很小。下面讨论第三种。<br />
<span id="more-2391"></span></p>
<h3>YUI 3</h3>
<p>YUI 3 的模块定义代码：</p>
<pre>
YUI.add("module-a", function(Y) {
    /* module code */
});
</pre>
<p>模块添加到 YUI 上时，<code>function(Y)</code>作为一个整体(closure)注册到环境变量里，module code 尚未执行。</p>
<p>模块调用代码：</p>
<pre>
YUI().use("module-a", function(Y) {
    /* user code */
});
</pre>
<p>此时，定义代码中的 function closure 才被调用：执行 module code, 将 module a 挂载到 YUI 的实例 Y 上。</p>
<p>很显然，YUI 3 的模块定义和加载机制，非常自然地实现了 Deferred Evaluation 的第三种策略。我们来看看效果如何。</p>
<h3>Tests</h3>
<p>测试页面：<a href="http://lifesinger.googlecode.com/svn/trunk/lab/2010/faster-javascript-load/test.html">deferred evaluation test</a></p>
<p>测试方法：点击 Load YUI3 按钮，会看到第二个 iframe 重复加载 5 次。加载完成后，点击 iframe 里的 Run Again （确保有缓存）。结果里的 Setup time &#8211; Load time, 就是 Deferred Evaluation 能为页面减少的加载时间。</p>
<p><img src="http://lifesinger.googlecode.com/svn/trunk/lab/2010/faster-javascript-load/yui3-deferred-evaluation.png" alt="YUI3 Deferred Evaluation Chart" /><br />
上图是在 T61 上的测试结果。加载的 JS 文件是 <a href="http://lifesinger.googlecode.com/svn/trunk/lab/2010/yui3-performance-test/yui3-combo-min.js">yui3-combo-min.js</a>, 仅打包了 YUI3 的基础模块。</p>
<p>从结果上可以看出，对于普通电脑来说，Deferred Evaluation 带来的性能提升并不明显：差异最大的 Safari 上，也仅减少了不到 50ms. 但可以推测：电脑 CPU 越低，Deferred Evaluation 带来的提升会越明显，比如 Mobile 应用上。</p>
<h3>结论</h3>
<ol>
<li>对于 YUI 3 来说，这是沙箱和模块加载机制带来的意外惊喜：能减少初始加载时间总是好的，虽然微不足道。</li>
<li>对于 Mobile 应用来说，Deferred Evaluation 非常值得尝试，Gmail for Mobile 团队走在了前列。</li>
<li>对于普通 Web 应用来说，JS 加载的主要性能优化点依旧是减少文件本身的大小，比如将 YUI Compressor 换成 Google Closure Compiler.</li>
</ol>
<p>最后推荐 Ara Pehlivanian 的博文：<a href="http://www.phpied.com/javascript-loading-strategies/">JavaScript loading strategies</a>, JS 加载有五个方面的优化策略：Reduce(减少文件大小), Defer(延迟), Go Async(异步), Be Lazy(懒加载), Bite Size(真的需要 JS 吗)，这五点特别是最后一点，需要我们的坚持和努力。</p>
]]></content:encoded>
			<wfw:commentRss>http://lifesinger.org/blog/2010/01/the-deferred-evaluation-of-yui3/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
