jQuery性能提升方法
来源:互联网 发布:php mysql 开启预编译 编辑:程序博客网 时间:2024/06/05 10:10
jQuery性能的方法提升
1.用对选择器。
最快的选择器:id选择器和元素标签选择器, jQuery内部会自动调用浏览器的原生方 法(比如getElementById()),所以它们的执行速度快。
较慢的选择器:class选择器; 大部分都有原生方法getElementByClassName(),速度不慢。IE5-IE8都没有部署这个方法,相当慢。
最慢的选择器:伪类选择器和属性选择器; 最慢的,因为浏览器没有针对它们的原生方法。一些浏览器的新版本,增加了querySelector()和querySelectorAll()方法,因此会使这类选择器的性能有大幅提高。
2.使用jQuery最新版本。因为新版本会改进性能,还有很多新功能。
3. 理解子元素和父元素的关系
1、
$parent.find('.child')
这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度较快。`
2、$(‘.child’,
$parent
)这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find(‘child’),这会导致一定的性能损失。它比最快的形式慢了5%-10%。
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。
$('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 dom对象
选中某一个网页元素,是开销很大的步骤。所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的结果,便于以后反复使用。
//糟糕的写法:$('#demo').find('.p1');$('#demo').find('.p2');//良好的写法是:var $demo= $('#demo');demo.find('.p1');demo.find('.p2');//根据测试,缓存比不缓存,快了2-3倍。
6、使用链式写法
jQuery的一大特点,就是允许使用链式写法。$('div').find('p').eq(2).html('Hello');采用链式写法时,jQuery自动缓存每一步的结果,因此比非链式写法要快。根据测试,链式写法比(不使用缓存的)非链式写法,大约快了25%。
7、事件的委托处理(Event Delegation)
javascript的事件模型,采用”冒泡”模式,子元素的事件会逐级向上”冒泡”,成为父元素的事件。
利用这一点,可以大大简化事件的绑定。比如,一个table,有100个td,点击td时toggleClass,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,这个事件会”冒泡”到父元素table上面,从而被监听到。
因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的”委托处理”,也就是子元素”委托”父元素处理这个事件。
$("table").delegate("td", "click", function(){ $(this).toggleClass("click");});or$("table").on("click", "td", function(){ $(this).toggleClass("click");});
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, key, value);
根据测试,后一种写法要比前一种写法,快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的,而$.data()方法是定义jQuery函数上面的,调用的时候不从复杂的jQuery对象上调用,所以速度快得多。
9、正确处理循环
循环总是一种比较耗时的操作,如果可以使用复杂的选择器直接选中元素,就不要使用循环,去一个个辨认元素。javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。
10、整合js文件
将多个js文件整合在一起可以减小对服务器请求次数,同时提高js文件加载速度。当然,整合时碰到的第一个问题可能会是对象不存在之类的,这就需要我们使用对象时,对它是否存在做个判断。
- jQuery性能提升方法
- 提升jQuery性能
- jQuery 提升性能
- 服务器性能提升方法
- 前端性能提升方法
- Web服务端性能提升方法
- 十大妙招提升jquery的性能
- jquery提升性能最佳实践小结
- 即刻提升jQuery性能的十个技巧
- jQuery提升性能技巧及个人总结
- 即刻提升jQuery性能的十个技巧
- 十个迅速提升JQuery性能的技巧
- 提升jQuery性能的十个技巧
- Jquery优化效率 提升性能解决方案
- Jquery优化效率 提升性能解决方案
- Jquery优化效率 提升性能解决方案
- Jquery优化效率 提升性能解决方案
- jQuery提升性能技巧及个人总结
- 详解赋范空间——图像处理中的数学原理详解24
- 面试笔试杂项积累-leetcode 61-65
- 理解RESTful架构
- 安卓进阶之自定义View
- Android 调整图标和字体大小
- jQuery性能提升方法
- androidStudio导入SlidingMenu第三方框架中出现的问题
- 第13讲-数值型数据的存储-练习
- HDU 1520 Anniversary party (树状DP)
- 设计模式之抽象工厂
- myeclispe 使用weblogic部署项目出现的问题
- python lxml安装
- 构建一个基于 Spring 的 RESTful Web Service
- 非监督学习之混合高斯模型和EM算法——Andrew Ng机器学习笔记(十)