<html>
<head>
<title>jquery 性能优化</title>
</head>
<body>
<p>JS 性能优化</p>
<h2><span style="color:#ff0000;"><strong>一. </strong></span><span style="color:#ff0000;"><strong>选择器<strong>性能优化建议</strong></strong></span></h2>
<p><strong>1. 总是从#id选择器来继承</strong></p>
<p style="margin-left:60px;">这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。</p>
<p style="margin-left:60px;"><span style="color:#000000;"><code>$(</code><code>'<span style="color:#ff0000;">#content</span>'</code><code>).<span style="color:#000080;"><strong>hide</strong></span>();</code></span></p>
<p style="margin-left:60px;">或者从ID选择器继承来选择多个元素:</p>
<p style="margin-left:60px;"><span style="color:#003366;"><code>$(</code><code>'<span style="color:#ff0000;">#content p</span>'</code><code>).<strong><span style="color:#000080;">hide</span></strong>();</code></span></p>
<p><strong>2. 在class前面使用tag</strong></p>
<p style="margin-left:60px;">jQuery中第二快的选择器就是tag选择器（如$(‘head’)），因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)</p>
<p style="margin-left:60px;"><span style="color:#000080;"><code>$(</code><code>'<span style="color:#ff0000;">#nslForm input.on</span>'</code><code>);</code></span></p>
<p style="margin-left:60px;">jQuery中class选择器是最慢的，因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为’content’的那个节点：</p>
<p style="margin-left:60px;"><code>$(</code><code>'<span style="color:#ff0000;">div#content</span>'</code><code>); </code><span style="color:#008000;"><code>// 非常慢，不要使用</code></span></p>
<p style="margin-left:60px;">用ID来修饰ID也是画蛇添足：</p>
<p style="margin-left:60px;"><code>$(</code><code>'<span style="color:#ff0000;">#content #traffic_light</span>'</code><code>); </code><span style="color:#008000;"><code>// 非常慢，不要使用</code></span></p>
<p><strong>3. 使用子查询</strong></p>
<p style="margin-left:60px;">将父对象缓存起来以备将来的使用</p>
<p style="margin-left:60px;"><span style="color:#003300;"><strong><span style="color:#000080;"><code>var</code></span></strong> <code>header = $(</code><code>'#<span style="color:#ff0000;">header</span>'</code><code>);</code></span></p>
<p><span style="color:#003300;"><strong><span style="color:#000080;"><code>var</code></span></strong> <code>menu = header.find(</code><code>'<span style="color:#ff0000;">.menu</span>'</code><code>);</code></span></p>
<p><span style="color:#008000;"><code>// 或者</code></span></p>
<p><span style="color:#003300;"><strong><span style="color:#000080;"><code>var</code></span></strong> <code>menu = $(</code><code>'<span style="color:#ff0000;">.menu</span>'</code><code>, header);</code></span></p>
<p>4. 优化选择器以适用Sizzle的“从右至左”模型</p>
<p style="margin-left:30px;">自版本1.3之后，jQuery采用了Sizzle库，与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些，而左边的选择器选择范围较宽泛些：</p>
<p style="margin-left:30px;">$('<span style="color:#ff0000;">.contact-links div.side-wrapper</span>');</p>
<p style="margin-left:30px;">而不要使用</p>
<p style="margin-left:30px;">$('<span style="color:#ff0000;">a.contact-links .side-wrapper</span>');</p>
<p>5. 采用find()，而不使用上下文查找</p>
<p style="margin-left:30px;">.find()函数的确快些。但是如果一个页面有许多DOM节点时，需要来回查找时，可能需要更多时间:</p>
<p style="margin-left:30px;">$('<span style="color:#ff0000;">.testdiv</span>', '<span style="color:#ff0000;">#pageBody</span>'); // 2353 on Firebug 3.6</p>
<p style="margin-left:30px;">$('<span style="color:#ff0000;">#pageBody</span>').<strong><span style="color:#003366;">find</span></strong>('<span style="color:#ff0000;">.testdiv</span>'); // 2324 on Firebug 3.6 - The best time</p>
<p style="margin-left:30px;">$('<span style="color:#ff0000;">#pageBody .testdiv</span>'); // 2469 on Firebug 3.6</p>
<p>6. 利用强大的链式操作</p>
<p style="margin-left:30px;">采用jQuery的链式操作比缓存选择器更有效：</p>
<p style="margin-left:30px;">$('<span style="color:#ff0000;">li.menu-item</span>').<strong><span style="color:#000080;">click</span></strong>(<strong><span style="color:#000080;">function</span> </strong>() {alert('test click');})</p>
<p style="margin-left:30px;"> .<strong><span style="color:#000080;">css</span></strong>('display', 'block')</p>
<p style="margin-left:30px;"> .<strong><span style="color:#000080;">css</span></strong>('color', 'red')</p>
<p style="margin-left:30px;"> <strong><span style="color:#000080;">.fadeTo</span></strong>(2, 0.7);</p>
<p>7. 编写属于你的选择器</p>
<p style="margin-left:60px;">如果你经常在代码中使用选择器，那么扩展jQuery的$.expr[':']对象吧，编写你自己的选择器。下面的例子中，我创建了一个abovethefold选择器，用来选择不可见的元素：<br /><br />
$.<strong><span style="color:#000080;">extend</span></strong>($.<strong><span style="color:#000080;">expr</span></strong>[':'], {<br />
<span style="color:#000000;">abovethefold</span>: <strong><span style="color:#000080;">function</span></strong>(el) {<br />
<strong><span style="color:#000080;">return</span> </strong>$(el).offset().top < $(window).scrollTop() + $(window).height();<br />
}<br />
});<br />
$('<span style="color:#ff0000;">div:abovethefold</span>'); <span style="color:#003300;">// 选择元素</span></p>
<h2><span style="color:#ff0000;">二、优化DOM操作建议</span></h2>
<p>8. 缓存jQuery对象</p>
<p style="margin-left:60px;"><span style="color:#ff0000;">将你经常用的元素缓存起来：</span></p>
<p style="margin-left:90px;">var header = $('#header');</p>
<p style="margin-left:90px;">var divs = header.find('div');</p>
<p style="margin-left:90px;">var forms = header.find('form');</p>
<p style="margin-left:60px;"><span style="color:#ff0000;">切记不要这样做:不要让相同的选择器在你的代码里出现多次.</span></p>
<p><span style="color:#000000;">$("#<span style="color:#ff0000;">traffic_light</span><span style="color:#ff0000;"> input.on</span>").<strong><span style="color:#003366;">bind</span></strong>('click', function(){…});<br />
$("#<span style="color:#ff0000;">traffic_light</span><span style="color:#ff0000;"> input.on</span>").<strong><span style="color:#003366;">css</span></strong>('border','3px dashed yellow');<br />
$("#<span style="color:#ff0000;">traffic_light</span><span style="color:#ff0000;"> input.on</span>").<strong><span style="color:#003366;">fadeIn</span></strong>('slow');</span></p>
<p style="margin-left:60px;"><span style="color:#ff0000;">最好先将对象缓存进一个变量然后再操作:</span></p>
<p><span style="color:#000000;"><strong>var</strong> $active_light = $('#traffic_light input.on');<br />
$active_light.bind('click', function(){…});<br />
$active_light.css('border','3px dashed yellow');<br />
$active_light.fadeIn('slow');</span></p>
<p>9. 当要进行DOM插入时，将所有元素封装成一个元素</p>
<p style="margin-left:60px;"><span style="color:#ff0000;">例如,你想动态的创建一组列表元素, 千万不要这么做:</span></p>
<p><strong><span style="color:#000080;">var</span></strong> array = [...]；<br /><br /><strong><span style="color:#003366;">for</span></strong><span style="color:#003366;"> (<strong><span style="color:#003366;">var</span></strong><strong><span style="color:#003366;"> </span></strong>i = 0, i < array.length; i++) {</span></p>
<p> </p>
<p> <span style="color:#008000;"> // 尽量不要在循环里面<span style="color:#008000;">直接进行DOM操作，速度很慢<br />
$('<span style="color:#ff0000;">#mylist').<span style="color:#003366;"><strong>append</strong>('<li>' + array[i] +'</li>');<br />
}</span></span></span></span></p>
<p><span style="color:#ff0000;">我们应该将整套元素字符串在插入进dom中之前全部创建好:</span></p>
<p><strong><span style="color:#000080;">var</span></strong><strong><span style="color:#000080;"> </span></strong>array = [...], li = ""; <br />
<br /><strong><span style="color:#000080;">for</span></strong><strong><span style="color:#000080;"> </span></strong>(<strong><span style="color:#000080;">var</span></strong><strong><span style="color:#000080;"> </span></strong>i = 0, l =array.length; i < l; i++) {</p>
<p><br />
li+='<li>' + top_100_list[i] +'</li>';<br />
}<br />
$('#<span style="color:#ff0000;">mylist').html(top_100_li);</span></p>
<p> </p>
<p><span style="color:#ff0000;">我们在插入之前将多个元素包裹进一个单独的父级节点会更快:</span></p>
<p><strong><span style="color:#003366;">var </span></strong>array = [...], ul ='<ul id="#mylist">';<br />
<br /><strong><span style="color:#003366;">for</span></strong><strong><span style="color:#003366;"> </span></strong>(<strong><span style="color:#003366;">var</span></strong><strong><span style="color:#003366;"> </span></strong>i=0, l = array.length; i < l; i++) {</p>
<p><br />
ul+='<li>' + top_100_list[i] +'</li>';<br />
}<br />
ul +='</ul>'; // //关闭无序列表<br />
<br />
$('#<span style="color:#ff0000;">mylist').replaceWith(ul);</span></p>
<p style="margin-left:60px;"><span style="color:#ff0000;">如果你做了以上几条还是担心有性能问题,那么:</span></p>
<ul><li>试试jquery的 <strong>clone()</strong> 方法, 它会创建一个节点树的副本, 它允许以”离线”的方式进行dom操作, 当你操作完成后再将其放回到节点树里.</li>
<li>使用<strong><a href="http://www.devguru.com/technologies/xmldom/quickref/obj_documentFragment.html">DOM DocumentFragments</a></strong>. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.</li>
</ul><p>10. 尽管jQuery不会抛出异常，但开发者也应该检查对象</p>
<p style="margin-left:60px;">尽管jQuery不会抛出大量的异常给用户，但是开发者也不要依赖于此。jQuery通常会执行了一大堆没用的函数之后才确定一个对象是否存在。所以在对一个作一系列引用之前，应先检查一下这个对象存不存在。</p>
<p>11. 使用直接函数，而不要使用与之等同的函数</p>
<p style="margin-left:60px;">为了获得更好的性能，你应该使用直接函数如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因为后面的几个将会调用$.ajax()。</p>
<p>12. 缓存jQuery结果，以备后来使用</p>
<p style="margin-left:60px;">你经常会获得一个javasript应用对象——你可以用App.来保存你经常选择的对象，以备将来使用：</p>
<p style="margin-left:60px;"><strong><span style="color:#000080;">App.hiddenDivs = $('div.hidden');</span></strong></p>
<p style="margin-left:60px;"><span style="color:#008000;">// 之后在你的应用中调用：</span></p>
<p style="margin-left:60px;"><strong><span style="color:#000080;">App.hiddenDivs.find('span');</span></strong></p>
<p>13. 采用jQuery的内部函数data()来存储状态</p>
<p style="margin-left:60px;">不要忘了采用.data()函数来存储信息：</p>
<p style="margin-left:60px;"><strong><span style="color:#000080;">$('#head').data('name', 'value');</span></strong></p>
<p style="margin-left:60px;"><span style="color:#008000;">// 之后在你的应用中调用:</span></p>
<p style="margin-left:60px;"><strong><span style="color:#000080;">$('#head').data('name');</span></strong></p>
<p>14. 使用jQuery utility函数</p>
<p style="margin-left:60px;">不要忘了简单实用的jQuery的utility函数。我最喜欢的是<span style="color:#000080;">$.isFunction()</span>, <span style="color:#000080;">$isArray()</span>和<span style="color:#000080;">$.each()</span>。</p>
<p>15. 为HTML块添加“JS”的class</p>
<p style="margin-left:60px;">当jQuery载入之后，首先给HTML添加一个叫”JS”的class</p>
<p style="margin-left:60px;">$('<span style="color:#ff0000;">HTML</span>').<strong><span style="color:#333300;">addClass</span></strong>('<span style="color:#ff0000;">JS</span>');</p>
<p style="margin-left:60px;">只有当用户启用JavaScript的时候，你才能添加CSS样式。例如：</p>
<p style="margin-left:60px;">/* 在css中 */</p>
<p style="margin-left:60px;">.JS #myDiv{display:none;}</p>
<p style="margin-left:60px;">所以当JavaScript启用的时候，你可以将整个HTML内容隐藏起来，用jQuery来实现你想实现的（譬如：收起某些面板或当用户点击它们时展开）。而当Javascript没有启用的时候，浏览器呈现所有的内容，搜索引擎爬虫也会勾去所有内容。我将来会更多的使用这个技巧。</p>
<h2><span style="color:#ff0000;">三、关于优化事件性能的建议</span></h2>
<p>16. 推迟到$(window).load</p>
<p style="margin-left:60px;">有时候采用$(window).load()比$(document).ready()更快，因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。</p>
<p>17. 使用Event Delegation</p>
<p style="margin-left:60px;">当你在一个容器中有许多节点，你想对所有的节点都绑定一个事件，delegation很适合这样的应用场景。使用Delegation，我们仅需要在父级绑定事件，然后查看哪个子节点(目标节点)触发了事件。当你有一个很多数据的table的时候，你想对td节点设置事件，这就变得很方便。先获得table，然后为所有的td节点设置delegation事件：</p>
<p style="margin-left:60px;">$("table").delegate("td", "hover", function(){</p>
<p style="margin-left:60px;"> $(this).toggleClass("hover");</p>
<p style="margin-left:60px;">});</p>
<p>18. 使用ready事件的简写</p>
<p style="margin-left:60px;">如果你想压缩js插件，节约每一个字节，你应该避免使用$(document).onready()</p>
<p style="margin-left:60px;">// 也不要使用</p>
<p style="margin-left:60px;">$(document).ready(function (){</p>
<p style="margin-left:60px;">// 代码</p>
<p style="margin-left:60px;">});</p>
<p style="margin-left:60px;">// 你可以如此简写：</p>
<p style="margin-left:60px;">$(function (){</p>
<p style="margin-left:60px;">// 代码</p>
<p style="margin-left:60px;">});</p>
<h3><span style="color:#ff0000;">四、测试jQuery</span></h3>
<p>19. jQuery单元测试</p>
<p style="margin-left:60px;">测试JavaSript代码最好的方法就是人来测试。但你可以使用一些自动化的工具如Selenium，Funcunit，QUit，QMock来测试你的代码（尤其是插件）。我想在另外一个专题来讨论这个话题因为实在有太多要说的了。</p>
<p>20. 标准化你的jQuery代码</p>
<p style="margin-left:60px;">经常标准化你的代码，看看哪个查询比较慢，然后替换它。你可以用Firebug控制台。你也可以使用jQuery的快捷函数来使测试变得更容易些：</p>
<p style="margin-left:60px;">// 在Firebug控制台记录数据的快捷方式</p>
<p style="margin-left:60px;">$.l($('div'));</p>
<p style="margin-left:60px;">// 获取UNIX时间戳</p>
<p style="margin-left:60px;">$.time();</p>
<p style="margin-left:60px;">// 在Firebug记录执行代码时间</p>
<p style="margin-left:60px;">$.lt();</p>
<p style="margin-left:60px;">$('div');</p>
<p style="margin-left:60px;">$.lt();</p>
<p style="margin-left:60px;">// 将代码块放在一个for循环中测试执行时间</p>
<p style="margin-left:60px;">$.bm("var divs = $('.testdiv', '#pageBody');");</p>
<p style="margin-left:60px;">// 2353 on Firebug 3.6</p>
<h3><span style="color:#ff0000;">五、其他常用jQuery性能优化建议</span></h3>
<p>21. 使用最新版本的jQuery</p>
<p style="margin-left:60px;">最新的版本往往是最好的。更换了版本后，不要忘记测试你的代码。有时候也不是完全向后兼容的。</p>
<p>22. 使用HMTL5</p>
<p style="margin-left:60px;">新的HTML5标准带来的是更轻巧的DOM结构。更轻巧的结构意味着使用jQuery需要更少的遍历，以及更优良的载入性能。所以如果可能的话请使用HTML5。</p>
<p>23. 如果给15个以上的元素加样式时，直接给DOM元素添加style标签</p>
<p style="margin-left:60px;">要给少数的元素加样式，最好的方法就是使用jQuey的css()函数。然而更15个以上的较多的元素添加样式时，直接给DOM添加style 标签更有效些。这个方法可以避免在代码中使用硬编码(hard code)。</p>
<p style="margin-left:60px;">$('<style type="text/css"> div.class { color: red; } </style>')</p>
<p style="margin-left:60px;">.appendTo('head');</p>
<p>24. 避免载入多余的代码</p>
<p style="margin-left:60px;">将Javascript代码放在不同的文件中是个好的方法，仅在需要的时候载入它们。这样你不会载入不必要的代码和选择器。也便于管理代码。</p>
<p>25. 压缩成一个主JS文件，将下载次数保持到最少</p>
<p style="margin-left:60px;">当你已经确定了哪些文件是应该被载入的，那么将它们打包成一个文件。用一些开源的工具可以自动帮你完成，如使用Minify(和你的后端代码集成)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等在线工具可以为你压缩文件。我最喜欢的是JSCompressor。</p>
<p>26. 需要的时候使用原生的Javasript</p>
<p style="margin-left:60px;">使用jQuery是个很棒的事情，但是不要忘了它也是Javascript的一个框架。所以你可以在jQuery代码有必要的时候也使用原生的Javascript函数，这样能获得更好的性能。</p>
<p>27. 从Google载入jQuery框架</p>
<p style="margin-left:60px;">当你的应用正式上线的时候，请从Google CDN载入jQuery，因为用户可以从最近的地方获取代码。这样你可以减少服务器请求，而用户如果浏览其他网站，而它也使用Google CDN的jQuery时，浏览器就会立即从缓存中调出jQuery代码。</p>
<p style="margin-left:60px;">// 链接特定版本的压缩代码</p>
<p style="margin-left:60px;"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script></p>
<p>28. 缓慢载入内容不仅能提高载入速度，也能提高SEO优化 （Lazy load content for speed and SEO benefits） </p>
<h2><span style="color:#ff0000;">六、其他</span></h2>
<h3 style="margin-left:30px;"><span style="color:#333333;">1. 冒泡</span></h3>
<p style="margin-left:60px;">除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.</p>
<p style="margin-left:60px;">代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.</p>
<p style="margin-left:60px;">例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class</p>
<p style="margin-left:60px;"><span style="color:#ff0000;">像这样绑定事件是低效的:</span></p>
<p><span style="color:#003300;">$(‘#<span style="color:#ff0000;">entryform input</span>).<strong><span style="color:#000080;">bind</span></strong>(‘focus‘, <strong><span style="color:#000080;">function</span></strong>(){</span><br /><span style="color:#003300;"> $(this).<strong><span style="color:#000080;">addClass</span></strong>(‘selected‘);</span><br /><span style="color:#003300;"> }).<strong><span style="color:#000080;">bind</span></strong>(‘blur‘, function(){</span><br /><span style="color:#003300;"> $(this).<strong><span style="color:#000080;">removeClass</span></strong>(‘selected‘);</span></p>
<p><span style="color:#003300;">});</span></p>
<p style="margin-left:60px;"><span style="color:#ff0000;">我们需要在父级监听获取焦点和失去焦点的事件:</span></p>
<p>$(‘<span style="color:#ff0000;">#entryform</span>‘).<strong><span style="color:#003366;">bind</span></strong>(‘focus‘, <strong><span style="color:#000080;">function</span></strong>(e){<br />
var cell = $(e.target);<br />
cell.<span style="color:#000080;"><strong>addClass</strong></span>(‘selected‘);<br />
}).<strong><span style="color:#003366;">bind</span></strong>(‘blur‘, function(e){<br />
var cell = $(e.target);<br />
cell.<strong><span style="color:#000080;">removeClass</span></strong>(‘selected‘);<br />
});</p>
<p style="margin-left:60px;">父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.</p>
<h3 style="margin-left:60px;"><span style="color:#333333;">2. 消除无效查询</span></h3>
<p style="margin-left:60px;">尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.</p>
<p style="margin-left:60px;">只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.</p>
<p style="margin-left:60px;">例如, 你的”文章”页面模板, 你可能会引用如下的代码在body结束处:</p>
<p><script type="text/javascript><br />
mylib.article.init();<br />
</script><br />
</body></p>
<p style="margin-left:60px;">如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.</p>
<p><ul id="traffic_light"><br />
<li><input type="radio" class="on" name="light" value="red" /> Red</li><br />
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li><br />
<li><input type="radio" class="off" name="light" value="green" /> Green</li><br />
</ul><br />
<script type="text/javascript><br />
mylib.traffic_light.init();<br />
</script></p>
<p style="margin-left:60px;">你的全局js库可能会是这样子的:</p>
<p>var mylib =<br />
{<br />
article_page :<br />
{<br />
init : function()<br />
{<br />
// Article page specific jQuery functions.<br />
}<br />
},<br />
traffic_light :<br />
{<br />
init : function()<br />
{<br />
// Traffic light specific jQuery functions.<br />
}<br />
}<br />
}</p>
<h3 style="margin-left:30px;"><span style="color:#333333;">3. 推迟到 $(window).load</span></h3>
<p style="margin-left:60px;">jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.</p>
<p style="margin-left:60px;">尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.</p>
<p style="margin-left:60px;">你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括iframe)被下载完成后执行.</p>
<p>$(window).load(function(){<br />
// 页面完全载入后才初始化的jQuery函数.<br />
});</p>
<p style="margin-left:60px;">多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.</p>
<h3 style="margin-left:30px;"><span style="color:#333333;">4. 压缩js</span></h3>
<p style="margin-left:60px;">推荐一个js在线压缩地址: <a href="http://dean.edwards.name/packer/">http://dean.edwards.name/packer/</a></p>
<h3 style="margin-left:30px;"><span style="color:#333333;">5. 全面掌握jquery库</span></h3>
<p style="margin-left:60px;">知己知彼, 百战百胜. 只有更深入的了解jQuery才能更灵活的使用它. 这里提供一个<a href="http://www.artzstudio.com/files/jquery-rules/jquery_1.3_cheatsheet_v1.pdf">jQuery的速查手册</a>, 可以打印出来随身携带. 要是有能力将jQuery源码通读一遍那就更好了.</p>
</body>
</html>
jquery 性能优化.html
Copyright: 采用 知识共享署名4.0 国际许可协议进行许可
