jq性能优化

1)在jquery中最快的选择器是ID选择器. 因为它直接来自于js的getElementById()方法.

var traffic_button = $(‘#traffic_button’);

选择多个元素的时候从就近的id开始继承，这样能提高性能。

var traffic_lights = $(‘#traffic_light input’);

2)第二快的选择器是标签选择器($(‘head’)). 因为它来自原getElementsByTagName() 方法.

一般用$(‘class’)的时候会给前面加上标签名来限制他，因为在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

var active_light = $(‘#traffic_light input.on’);

3)给选择器提供上下文

jQuery(expression, [context])，给它指定第二个参数，这样就不必全局去寻找

描述:在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
jQuery 代码:$("input:radio", document.forms[0]);

4)多次选择相同的元素，一般都要将jquery对象缓存进一个变量

不要这样做：

$(‘#traffic_light input.on).bind(‘click‘, function(){…});
$(‘#traffic_light input.on).css(‘border’, ’3px dashed yellow’);
$(‘#traffic_light input.on).css(‘background-color‘, ‘orange‘);
$(‘#traffic_light input.on).fadeIn(‘slow’);

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ’3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(‘slow’);

5)对直接的DOM操作进行限制

var top_100_list = [...], // assume this has 100 unique strings
   $mylist = $(‘#mylist‘), // jQuery selects our <ul> element
   top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++)
{
   top_100_li += ‘<li>‘ + top_100_list[i] + ‘</li>‘;
}
$mylist.html(top_100_li);

6)jq的链式操作可以写更少的代码, 让我们的js更轻量

jq的链式操作能大大精简代码量，多项操作一行代码一气呵成，使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。

7)我们对一个已包装的对象使用附加的选择器操作

因为我们已经在保存了一个父级对象在变量里, 这样提高对其子元素的操作

例如,:我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.

<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>

var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);

8)冒泡

用delegate绑定事件，他是绑定在父元素上的始终只有一个监听，即使后来动态生成的新元素也可自动获得父元素上的事件处理函数。delegate(“selector”,“事件名”,function)

可以简写$("div p").click(function () {
alert($(this).text());
})

9)合理使用$(document).ready和 $(window).load

$(document).ready它可以在页面渲染时,其它元素还没下载完成就执行.但是可能会导致你的页面一直是载入中的状态, 这是可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括iframe)被下载完成后执行.

5)对直接的DOM操作进行限制

6)jq的链式操作可以写更少的代码, 让我们的js更轻量

猜你喜欢