html性能优化⽅法,jQuery性能优化⼤全,jQuery性能优化⽅法作为⼀个菜鸟前端，对于jquery好⽤还是相当喜欢的，初步⼊门，总是向着最容易的地⽅⼊⼿，对于jquery的优化知识了解不多，看到⼀篇⽂章写得很好，其实在“jquery权威指南”⾥⾯也有相关的讲解，jquery优化得好，速度可以快⼏倍，从现在开始学习并运⽤这些技巧⾮常有必要。下⾯转载⼀篇阮⼀峰的⽇志。
1. 使⽤最新版本的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表现好于⽼版本。
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()⽅法，因此会使这类选择器的性能有⼤幅提⾼。
最后是不同选择器的性能⽐较图。
可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都⾮常慢。
3. 理解⼦元素和⽗元素的关系
下⾯六个选择器，都是从⽗元素中选择⼦元素。你知道哪个速度最快，哪个速度最慢吗？
$('.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会进⾏缓存，所以进⼀步加快了执⾏速度。
具体的例⼦和⽐较结果，请看这⾥。
4. 不要过度使⽤jQuery
jQuery速度再快，也⽆法与原⽣的javascript⽅法相⽐。所以有原⽣⽅法可以使⽤的场合，尽量避免使⽤jQuery。
以最简单的选择器为例，ElementById("foo")要⽐$("#foo")快10多倍。
再来看⼀个例⼦，为a元素绑定⼀个处理点击事件的函数：jquery的attr属性
$('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多倍。
5. 做好缓存
选中某⼀个⽹页元素，是开销很⼤的步骤。所以，使⽤选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使⽤。
⽐如，下⾯这样的写法就是糟糕的写法：
jQuery('#top').find('p.classA');
jQuery('#top').find('p.classB');
更好的写法是：
var cached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');
根据测试，缓存⽐不缓存，快了2-3倍。
6. 使⽤链式写法
jQuery的⼀⼤特点，就是允许使⽤链式写法。
$('div').find('h3').eq(2).html('Hello');
采⽤链式写法时，jQuery⾃动缓存每⼀步的结果，因此⽐⾮链式写法要快。根据测试，链式写法⽐(不使⽤缓存的)⾮链式写法，⼤约快了25%。
7. 事件的委托处理(Event Delegation)
javascript的事件模型，采⽤"冒泡"模式，也就是说，⼦元素的事件会逐级向上"冒泡"，成为⽗元素的事件。
利⽤这⼀点，可以⼤⼤简化事件的绑定。⽐如，有⼀个表格(table元素)，⾥⾯有100个格⼦(td元素)，现在要求在每个格⼦上⾯绑定⼀个点击事件(click)，请问是否需要将下⾯的命令执⾏100次？
$("td").on("click", function(){
$(this).toggleClass("click");
});
回答是不需要，我们只要把这个事件绑定在table元素上⾯就可以了，因为td元素发⽣点击事件之后，这个事件会"冒泡"到⽗元素table上⾯，从⽽被监听到。
因此，这个事件只需要在⽗元素绑定1次即可，⽽不需要在⼦元素上绑定100次，从⽽⼤⼤提⾼性能。这就叫事件的"委托处理"，也就是⼦元素"委托"⽗元素处理这个事件。
$("table").on("click", "td", function(){ $(this).toggleClass("click"); });
更好的写法，则是把事件绑定在document对象上⾯。
$(document).on("click", "td", function(){ $(this).toggleClass("click"); });
如果要取消事件的绑定，就使⽤off()⽅法。
$(document).off("click", "td");
由于1.9已经去掉live和delegate⽅法，本⼈建议⼀切均以on来写⽐较合适，毕竟以下两个均是由on扩展过来的。
具体的写法有两种。第⼀种是采⽤.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%。
8. 少改动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[0],key,value);
根据测试， 后⼀种写法要⽐前⼀种写法，快了将近10倍。因为elem.data()⽅法是定义在jQuery函数的prototype对象上⾯的， ⽽$.data()⽅法是定义jQuery函数上⾯的，调⽤的时候不从复杂的jQuery对象上调⽤，所以速度快得多。(此处可以参阅下⾯第10点。)
(4)插⼊html代码的时候，浏览器原⽣的innterHTML()⽅法⽐jQuery对象的html()更快。
9. 正确处理循环
循环总是⼀种⽐较耗时的操作，如果可以使⽤复杂的选择器直接选中元素，就不要使⽤循环，去⼀个个辨认元素。
javascript原⽣循环⽅法for和while，要⽐jQuery的.each()⽅法快，应该优先使⽤原⽣⽅法。
10. 尽量少⽣成jQuery对象
每当你使⽤⼀次选择器(⽐如$('#id'))，就会⽣成⼀个jQuery对象。jQuery对象是⼀个很庞⼤的对象，带有很多属性和⽅法，会占⽤不少资源。所以，尽量少⽣成jQuery对象。
举例来说，许多jQuery⽅法都有两个版本，⼀个是供jQuery对象使⽤的版本，另⼀个是供jQuery函数使⽤的版本。下⾯两个例⼦，都是取出⼀个元素的⽂本，使⽤的都是text()⽅法。
你既可以使⽤针对jQuery对象的版本：
var $text = $("#text");
var $ts = $();
也可以使⽤针对jQuery函数的版本：
var $text = $("#text");
var $ts = $.text($text);
由于后⼀种针对jQuery函数的版本不通过jQuery对象操作，所以相对开销较⼩，速度⽐较快。
11. 选择作⽤域链最短的⽅法
严格地说，这⼀条原则对所有Javascript编程都适⽤，⽽不仅仅针对jQuery。
我们知道，Javascript的变量采⽤链式作⽤域。读取变量的时候，先在当前作⽤域寻该变量，如果不到，就前往上⼀层的作⽤域寻该变量。这样的设计，使得读取局部变量⽐读取全局变量快得多。
请看下⾯两段代码，第⼀段代码是读取全局变量：
var a = 0;
function x(){
a += 1;
}
第⼆段代码是读取局部变量：
function y(){
var a = 0;
a += 1;
}
第⼆段代码读取变量a的时候，不⽤前往上⼀层作⽤域，所以要⽐第⼀段代码快五六倍。
同理，在调⽤对象⽅法的时候，closure模式要⽐prototype模式更快。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。