jQuery开发基础第10章jQuery性能优化与技巧.ppt

本章要求:第10章jQuery性能优化与技巧?掌握常用的jQuery性能优化方法?掌握jQuery的常用技巧主要内容1. 常用的jQuery性能优化方法2. jQuery性能优化 ,建议使用var关键字进行代码,代码如下:var page = 0, $loading = $('#loading'), $body = $('body');说明:不需要给每一个变量都添加一个var关键字。 $符号声明或者定义变量的时候,请记住如果定义的是jQuery变量,请添加一个$符号到变量前,代码如下:var $loading = $('#loading');这里定义成这样的好处在于,可以有效的提示自己或者其它阅读代码的用户,这是一个jQuery的变量。 ,更轻巧的结构意味着使用jQuery需要更少的遍历,以及更优良的载入性能,所以如果可能的话,请使用HTML5。 ,但是不要忘了它也是JavaScript的一个框架,所以可以在jQuery代码有必要时也使用原生的JavaScript函数,这样能获得更好的性能。 ,例如,下面的代码: $(function(){ $('width','50%'); $('border','1px solid #202020'); $('color','#fff'); });可以精简为下面的写法: $(function(){ $({'width':'50%','border':'1px solid #202020','color':'#fff'}); }); ,看看哪个查询比较慢,然后替换它。可以用Firebug控制台,也可以使用jQuery的快捷函数来使测试变得更容易,常用的测试方式如下: // 在Firebug控制台记录数据的快捷方式 $.l($('div')); // 获取UNIX时间戳 $.time(); // 在Firebug记录执行代码时间 $.lt(); $('div'); $.lt(); // 将代码块放在一个for循环中测试执行时间 $.bm("vardivs = $('.testdiv', '#pageBody');"); ,,。 #id选择器来继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法例如,有下面的HTML代码: <div id="content"> <form method="post" action="/"> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> Red</li> <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li> <li><input type="radio" class="off" name="light" value="green" /> Green</li> </ul> <input class="button" id="traffic_button" type="submit" value="Go" /> </form> </div>如果像这样选择按钮是低效的,代码如下:vartraffic_button = $(‘#content .button‘);用ID选择器直接选择按钮效率更高,代码如下:vartraffic_button = $(‘