如今的网站愈来愈注重用户体验，网站必需立即回响反映，前端手艺愈来愈重要了，之前我们都用javascript，厥后涌现了很多js的框架，挪用起来也很轻易，然则跟着网页上加载的数据愈来愈多，运用jquery的时刻就要注重了，有些要领看似轻易，然则效果却很低劣。
我们制造的一个网站页面，一共显现了三千多条数据，用户挑选响应的挑选前提，经由过程jquery来掌握这三千多条数据中个，哪些显现，哪些隐蔽。
因为我是做php背景的，虽然用的jquery很多，然则也不是很善于，写完今后，发明页面的反应迥殊卡顿，查了很多材料，也问了一下善于前端的人，革新今后，效果比之前好了很多。
注重事项：
1.each的运用
因为要轮回遍历这三千多个元素，所以运用了each，调试今后发明，each真的很慢，改用for轮回
革新前
$(".data").each(function(){
console.log($(this));
});
革新后
var data = $(".data");
for(i=0;i<data.length;i++){
console.log(data[i]);
}
javascript原生轮回要领for和while，要比jQuery的.each()要领快，应当优先运用原生要领。
2.用对挑选器
在jQuery中，你可以用多种挑选器，挑选同一个网页元素。每种挑选器的机能是不一样的，你应当相识它们的机能差别。
（1）最快的挑选器：id挑选器和元素标签挑选器
举例来说，下面的语句机能最好：
$('#id')
$('form')
$('input')
碰到这些挑选器的时刻，jQuery内部会自动挪用浏览器的原生要领（比方getElementById()），所以它们的实行速率快。
（2）较慢的挑选器：class挑选器
$(‘.className’)的机能，取决于差别的浏览器。
Firefox、Safari、Chrome、Opera浏览器，都有原生要领getElementByClassName()，所以速率并不慢。然则，IE5-IE8都没有布置这个要领，所以这个挑选器在IE中会相称慢。
（3）最慢的挑选器：伪类挑选器和属性挑选器
先来看例子。找出网页中所有的隐蔽元素，就要用到伪类挑选器：
$(':hidden')
属性挑选器的例子则是：
$('[attribute=value]')
这两种语句是最慢的，因为浏览器没有针对它们的原生要领。然则，一些浏览器的新版本，增加了querySelector()和querySelectorAll()要领，因而会使这类挑选器的机能有大幅进步。
末了是差别挑选器的机能比较图。
3.show()和hide()的运用
当页面上的元素不是很多时，用show和hide看不出什么问题，元素一多，就不行了
我们可以修正css，如许会更快
革新前
$('#temp1').show();
$('#temp2').hide();
革新后
$('#temp1').css('display','block');
$('#temp2').css('display','none');
4.跳出轮回和住手递次
遍历的时刻可能会涌现多层轮回，所以我们前提足够了，就退出轮回或许住手递次，要不然会糟蹋很多时候，也增加了js的累赘
（1）break会使运转的递次马上退出包含在最内层的轮回或许退出一个switch语句。
（2）continue语句和break语句类似。所差别的是，它不是退出一个轮回，而是最先轮回的一次新迭代。
continue语句只能用在while语句、do/while语句、for语句、或许for/in语句的轮回体内，在别的处所运用都邑引发毛病！
（3）return语句就是用于指定函数返回的值。return语句只能出如今函数体内，出如今代码中的其他任何处所都邑形成语法毛病！
当实行return语句时，纵然函数主体中另有其他语句，函数实行也会住手！
补充：下面的注重事项虽然没有用到，然则照样放上来吧
运用最新版本的jQuery
jQuery的版本更新很快，你应当老是运用最新的版本。因为新版本会革新机能，另有很多新功用。
下面就来看看，差别版本的jQuery机能差别有多大。这里是三条最常见的jQuery挑选语句：
$('.elem')
$('.elem', context)
context.find('.elem')
我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内可以实行多少次。效果以下：
可以看到，1.6.2版本的运转次数，远远凌驾两个老版本。尤其是第一条语句，机能有数倍的进步。
其他语句的测试，比方.attr(“value”)和.val()，也是新版本的jQuery表现好过老版本。
明白子元素和父元素的关联
下面六个挑选器，都是从父元素中挑选子元素。你晓得哪一个速率最快，哪一个速率最慢吗？
$('.child', $parent)
$parent.find('.child')
$parent.children('.child')
$('#parent > .child')
$('#parent .child')
$('.child', $('#parent'))
我们一句句来看。
(1) $('.child', $parent)
这条语句的意义是，给定一个DOM对象，然后从中挑选一个子元素。jQuery会自动把这条语句转成$.parent.find(‘child’)，这会致使肯定的机能丧失。它比最快的情势慢了5%-10%。
(2) $parent.find('.child')
这条是最快的语句。.find()要领会挪用浏览器的原生要领（getElementById，getElementByName，getElementByTagName等等），所以速率较快。
(3) $parent.children('.child')
这条语句在jQuery内部，会运用$.sibling()和javascript的nextSibling()要领，一个个遍历节点。它比最快的情势约莫慢50%。
(4) $('#parent > .child')
jQuery内部运用Sizzle引擎，处置惩罚种种挑选器。Sizzle引擎的挑选递次是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这致使它比最快的情势约莫慢70%。
(5) $('#parent .child')
这条语句与上一条是一样的状况。然则，上一条只挑选直接的子元素，这一条可以于挑选多级子元素，所以它的速率更慢，也许比最快的情势慢了77%。
(6) $('.child', $('#parent'))
jQuery内部会将这条语句转成$(‘#parent’).find(‘.child’)，比最快的情势慢了23%。
所以，最好挑选是$parent.find(‘.child’)。而且，因为$parent每每在前面的操纵已天生，jQuery会举行缓存，所以进一步加快了实行速率。
详细的例子和比较效果，请看这里。
不要过分运用jQuery
jQuery速率再快，也没法与原生的javascript要领比拟。所以有原生要领可以运用的场所，只管防止运用jQuery。
请看下面的例子，为a元素绑定一个处置惩罚点击事宜的函数：
$('a').click(function(){
alert($(this).attr('id'));
});
这段代码的意义是，点击a元素后，弹出该元素的id属性。为了猎取这个属性，必需一连两次挪用jQuery，第一次是$(this)，第二次是attr(‘id’)。
事实上，这类处置惩罚完整不必要。更准确的写法是，直接采纳javascript原生要领，挪用this.id：
$('a').click(function(){
alert(this.id);
});
依据测试，this.id的速率比$(this).attr(‘id’)快了20多倍。
做好缓存
选中某一个网页元素，是开支很大的步骤。所以，运用挑选器的次数应当越少越好，而且只管缓存选中的效果，便于今后重复运用。
比方，下面如许的写法就是蹩脚的写法：
jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');
更好的写法是：
var cached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');
依据测试，缓存比不缓存，快了2-3倍。
运用链式写法
jQuery的一大特性，就是许可运用链式写法。
$('div').find('h3').eq(2).html('Hello');
采纳链式写法时，jQuery自动缓存每一步的效果，因而比非链式写法要快。依据测试，链式写法比（不运用缓存的）非链式写法，约莫快了25%。
事宜的托付处置惩罚（Event Delegation）
javascript的事宜模子，采纳”冒泡”形式，也就是说，子元素的事宜会逐级向上”冒泡”，成为父元素的事宜。
应用这一点，可以大大简化事宜的绑定。比方，有一个表格（table元素），内里有100个格子（td元素），如今请求在每一个格子上面绑定一个点击事宜（click），叨教是不是需要将下面的敕令实行100次？
$(“td”).bind(“click”, function(){
$(this).toggleClass(“click”);
});
回复是不需要，我们只要把这个事宜绑定在table元素上面就可以了，因为td元素发作点击事宜今后，这个事宜会”冒泡”到父元素table上面，从而被监听到。
因而，这个事宜只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大进步机能。这就叫事宜的”托付处置惩罚”，也就是子元素”托付”父元素处置惩罚这个事宜。
详细的写法有两种。第一种是采纳.delegate()要领：
$(“table”).delegate(“td”, “click”, function(){
$(this).toggleClass(“click”);
});
第二种是采纳.live()要领：
$(“table”).each(function(){
$(“td”, this).live(“click”, function(){
$(this).toggleClass(“click”);
});
});
这两种写法基础等价。唯一的区分在于，.delegate()是当事宜冒泡到指定的父元素时触发，.live()则是当事宜冒泡到文档的根元素后触发，因而.delegate()比.live()稍快一点。另外，这两种要领比拟传统的.bind()要领另有一个优点，那就是对动态插进去的元素也有用，.bind()只对已存在的DOM元素有用，对动态插进去的元素无效。
依据测试，托付处置惩罚比不托付处置惩罚，快了几十倍。在托付处置惩罚的状况下，.delegate()又比.live()约莫快26%。
少修改DOM构造
（1）修改DOM构造开支很大，因而不要频仍运用.append()、.insertBefore()和.insetAfter()如许的要领。
假如要插进去多个元素，就先把它们兼并，然后再一次性插进去。依据测试，兼并插进去比不兼并插进去，快了快要10倍。
（2）假如你要对一个DOM元素举行大批处置惩罚，应当先用.detach()要领，把这个元素从DOM中掏出来，处置惩罚完毕今后，再从新插回文档。依据测试，运用.detach()要领比不运用时，快了60%。
（3）假如你要在DOM元素上贮存数据，不要写成下面如许：
var elem = $(‘#elem');
elem.data(key,value);
而要写成：
var elem = $(‘#elem');
$.data(elem,key,value);
依据测试，后一种写法要比前一种写法，快了快要10倍。因为elem.data()要领是定义在jQuery函数的prototype对象上面的，而$.data()要领是定义jQuery函数上面的，挪用的时刻不从庞杂的jQuery对象上挪用，所以速率快得多。（此处可以参阅下面第10点。）
只管少天生jQuery对象
每当你运用一次挑选器（比方$(‘#id’)），就会天生一个jQuery对象。jQuery对象是一个很巨大的对象，带有很多属性和要领，会占用不少资本。所以，只管少天生jQuery对象。
举例来说，很多jQuery要领都有两个版本，一个是供jQuery对象运用的版本，另一个是供jQuery函数运用的版本。下面两个例子，都是掏出一个元素的文本，运用的都是text()要领。你既可以运用针对jQuery对象的版本：
var $text = $(“#text”);
var $ts = $text.text();
也可以运用针对jQuery函数的版本：
var $text = $(“#text”);
var $ts = $.text($text);
因为后一种针对jQuery函数的版本不经由过程jQuery对象操纵，所以相对开支较小，速率比较快。
9.多个if else轮回 改成 switch
10.全局变量有点多，轻易混，可以搞个对象，把每一个功用都写成一个零丁的对象，逻辑代码都是对象中的要领
11.把功用类似的js代码零丁搞成一个要领，可以用工场形式那种，传参数挪用本身的流水线功课
12.猎取父节点的要领之前写的有点傻，$(‘div’).parent().parent().parent()这类多层查找，改成$(‘div’).parents()
参考文章：http://www.jb51.net/article/43198.htm
同时也谢谢赋予我协助的朋友们。
