jQuery性能优化技巧

技巧6: 更新路由器固件以获取最新性能优化 #生活技巧# #数码产品使用技巧# #无线网络优化技巧#

一、用对选择器

最快的选择器：id选择器和元素标签选择器
遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。

$('#id') $('form') $('input') 123

较慢的选择器：class选择器
$(’.className’)的性能，取决于不同的浏览器。Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。

二、理解父子关系

下面六个选择器，都是从父元素中选择子元素，建议使用find方法

$('.child', $parent) //比最快的形式慢了5%-10% $parent.find('.child') //最快 $parent.children('.child') //比最快的形式大约慢50% $('#parent > .child') //比最快的形式大约慢70% $('#parent .child') //最慢,比最快的形式慢了77% $('.child', $('#parent')) //最快的形式慢了23% 123456

三、做好缓存

选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。
缓存比不缓存，快了2-3倍

　var cached = jQuery('#top'); 　cached.find('p.classA'); 　cached.find('p.classB'); 123

采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%

$('div').find('h3').eq(2).html('Hello'); 1

四、事件委托

javascript的事件模型，采用"冒泡"模式，利用这一点可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click）。
可以这么写：

$("table").on("click", "td", function(){ 　　$(this).toggleClass("click"); }); 123

更好的写法，则是把事件绑定在document对象上面

$(document).on("click", "td", function(){ 　　$(this).toggleClass("click"); }); 123

如果要取消事件的绑定，就使用off()方法

$(document).off("click", "td"); 1

参考文章
jQuery性能优化大全
jQuery代码优化的9种方法

网址：jQuery性能优化技巧 https://www.yuejiaxmz.com/news/view/791652

相关内容

jQuery 性能优化指南 （1）
jquery 日程管理插件
jquery基础实训报告
PHP框架性能优化：代码优化技巧
打造工作日程安排神器：利用jQuery、Bootstrap和DayJS
jQuery中attr()方法用法实例
Java 性能优化的五大技巧
Java 函数性能优化技巧有哪些？
PHP中封装性的性能优化技巧
Hive 性能优化 9 大技巧

随便看看