﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-古木天琪‘BlogJava-随笔分类-HTML5技术</title><link>http://www.blogjava.net/gumutianqi/category/49643.html</link><description>自己选择的路，跪着也要走完</description><language>zh-cn</language><lastBuildDate>Thu, 22 Dec 2011 20:00:20 GMT</lastBuildDate><pubDate>Thu, 22 Dec 2011 20:00:20 GMT</pubDate><ttl>60</ttl><item><title>从 RequireJS 到 SeaJS（1）</title><link>http://www.blogjava.net/gumutianqi/archive/2011/12/22/367043.html</link><dc:creator>古木天琪</dc:creator><author>古木天琪</author><pubDate>Thu, 22 Dec 2011 15:01:00 GMT</pubDate><guid>http://www.blogjava.net/gumutianqi/archive/2011/12/22/367043.html</guid><wfw:comment>http://www.blogjava.net/gumutianqi/comments/367043.html</wfw:comment><comments>http://www.blogjava.net/gumutianqi/archive/2011/12/22/367043.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/gumutianqi/comments/commentRss/367043.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/gumutianqi/services/trackbacks/367043.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: RequireJS 发布 1.0.0 了，很值得关注，看是否有可借鉴之处。<br>本次比较不涉及具体实现代码，主要比较两者的 API 设计。<br><br>http://requirejs.org<br>http://seajs.com<br><br>从定位谈起<br><br>首先，从 requirejs.org 首页可以得知，RequireJS 的定位是：<br><br>RequireJS 是一个 JavaScript 文件和模块加载器，特别为浏览器优化，同时也可运行在 Rhino 和 Node 环境中。<br><br>SeaJS 的定位是：<br><br>SeaJS 是一个适用于浏览器端的 JavaScript 模块加载器。<br><br>不要小看这两句话，任何类库/框架的定位，或者说愿景/目标，最终会决定该类库/框架的方方面面&nbsp;&nbsp;<a href='http://www.blogjava.net/gumutianqi/archive/2011/12/22/367043.html'>阅读全文</a><img src ="http://www.blogjava.net/gumutianqi/aggbug/367043.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/gumutianqi/" target="_blank">古木天琪</a> 2011-12-22 23:01 <a href="http://www.blogjava.net/gumutianqi/archive/2011/12/22/367043.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JavaScript 性能优化技巧：函数节流</title><link>http://www.blogjava.net/gumutianqi/archive/2011/09/28/359705.html</link><dc:creator>古木天琪</dc:creator><author>古木天琪</author><pubDate>Wed, 28 Sep 2011 07:50:00 GMT</pubDate><guid>http://www.blogjava.net/gumutianqi/archive/2011/09/28/359705.html</guid><wfw:comment>http://www.blogjava.net/gumutianqi/comments/359705.html</wfw:comment><comments>http://www.blogjava.net/gumutianqi/archive/2011/09/28/359705.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/gumutianqi/comments/commentRss/359705.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/gumutianqi/services/trackbacks/359705.html</trackback:ping><description><![CDATA[<p> </p><div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:127f066e-7b08-4b50-b2c9-d49abc104ead" class="wlWriterEditableSmartContent">古木天琪 标签: <a href="http://www.example.com/JavaScript" rel="tag">JavaScript</a>，<a href="http://www.example.com/%e6%80%a7%e8%83%bd" rel="tag">性能</a>，<a href="http://www.example.com/JS%e6%80%a7%e8%83%bd" rel="tag">JS性能</a>，<a href="http://www.example.com/%e5%9b%9e%e8%b0%83%e5%87%bd%e6%95%b0" rel="tag">回调函数</a>，<a href="http://www.example.com/%e5%bb%b6%e6%97%b6%e5%87%bd%e6%95%b0" rel="tag">延时函数</a></div><p>&nbsp;</p> <p>函数节流技术的主要思路是，通过一个定时器，阻断连续重复的函数调用。对于我们自己内部使用的函数，这通常意义不大，也不推荐使用这个技术，它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数，却非常有意义。例如一个 mousemove 或者 IE 中 resize 事件的监听函数。 </p> <p><img title="JavaScript 函数节流" alt="JavaScript 函数节流" src="http://www.jsmix.com/wp-content/uploads/2010/09/function-throttling.jpg" width="500" height="200" />  </p><p>这类事件监听函数往往伴随着两个主要特征：<strong>1</strong>. 短时间内连续多次重复触发 ; <strong>2</strong>. 大量的 DOM 操作。众所周知，DOM 操作对内存和 CPU 的开销是比较大的，特别是当同时满足特征1时，往往给浏览器造成不小的压力。函数节流技术的意义在于在用户察觉范围外，降低函数调用的频率，从而提升性能。  </p><p>这个技巧的大概模式如下面这样： </p><pre class="brush: js; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;"><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #008080; ">&nbsp;1</span>&nbsp;<span style="color: #0000FF; ">var</span>&nbsp;processor&nbsp;=&nbsp;{<br /><span style="color: #008080; ">&nbsp;2</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeoutId:&nbsp;<span style="color: #0000FF; ">null</span>,<br /><span style="color: #008080; ">&nbsp;3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><span style="color: #008080; ">&nbsp;4</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;performProcessing:&nbsp;<span style="color: #0000FF; ">function</span>(){<br /><span style="color: #008080; ">&nbsp;5</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #008000; ">//</span><span style="color: #008000; ">&nbsp;要执行的代码</span><span style="color: #008000; "><br /></span><span style="color: #008080; ">&nbsp;6</span>&nbsp;<span style="color: #008000; "></span>&nbsp;&nbsp;&nbsp;&nbsp;},<br /><span style="color: #008080; ">&nbsp;7</span>&nbsp;<br /><span style="color: #008080; ">&nbsp;8</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;process:&nbsp;<span style="color: #0000FF; ">function</span>(){<br /><span style="color: #008080; ">&nbsp;9</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(<span style="color: #0000FF; ">this</span>.timeoutId);<br /><span style="color: #008080; ">10</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">this</span>.timeoutId&nbsp;&nbsp;=&nbsp;setTimeout(<span style="color: #0000FF; ">function</span>(){<br /><span style="color: #008080; ">11</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processor.performProcessing();<br /><span style="color: #008080; ">12</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;100);<br /><span style="color: #008080; ">13</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br /><span style="color: #008080; ">14</span>&nbsp;};<br /><span style="color: #008080; ">15</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><span style="color: #008080; ">16</span>&nbsp;<span style="color: #008000; ">//</span><span style="color: #008000; ">调用</span><span style="color: #008000; "><br /></span><span style="color: #008080; ">17</span>&nbsp;<span style="color: #008000; "></span>processor.process();</div></pre><pre class="brush: js; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">performProcessing 是真正要调用的函数，而程序的入口在 process，每次进入 process，真正要调用的函数 performProcessing 都会被延迟 100 毫秒执行，如果在此期间，process 再次被调用，则会重置前一次的计时器，重新开始计时，这样保证了 performProcessing 中的代码至少要间隔 100 毫秒才会被执行一次，原理非常的简单，下面这个函数也是利用这个原理，通过闭包达到了同样的目的，它接受两个参数，第一个是要真正要执行的函数，第二个是间隔的时间。</pre><pre class="brush: js; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;"><div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="color: #0000FF; ">function</span>&nbsp;throttle(fn,&nbsp;delay)&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">var</span>&nbsp;timer&nbsp;=&nbsp;<span style="color: #0000FF; ">null</span>;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">return</span>&nbsp;<span style="color: #0000FF; ">function</span>&nbsp;()&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #0000FF; ">var</span>&nbsp;context&nbsp;=&nbsp;<span style="color: #0000FF; ">this</span>,&nbsp;args&nbsp;=&nbsp;arguments;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(timer);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timer&nbsp;=&nbsp;setTimeout(<span style="color: #0000FF; ">function</span>&nbsp;()&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fn.apply(context,&nbsp;args);<br />&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;delay);<br />&nbsp;&nbsp;};<br />}</div></pre>
<hr />

<p>另外，有人为 jQuery 写了相同功能的插件：<a href="http://plugins.jquery.com/project/ba-jquery-throttle-debounce-plugin">点击这里传送到 jQuery plugins</a>
</p><p>Google Closure Library 也有类似的 API：<a href="http://closure-library.googlecode.com/svn-history/r44/docs/class_goog_Throttle.html">点击这里传送到 Google Code</a> </p><img src ="http://www.blogjava.net/gumutianqi/aggbug/359705.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/gumutianqi/" target="_blank">古木天琪</a> 2011-09-28 15:50 <a href="http://www.blogjava.net/gumutianqi/archive/2011/09/28/359705.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>