`
kylines
  • 浏览: 87381 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Jquery代码性能优化(他山之石)

阅读更多
(一)优化jQuery的each函数
糟糕的代码:
someDivs.each(function() {  
 $('#anotherDiv')[0].innerHTML += $(this).text();  
}); 
在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素两次获取innerHTML属性创建了一个jQuery对象,只是为了获取元素的text属性优化的代码:
var someDivs = $('#container').find('.someDivs'),  
 contents = [];  
 someDivs.each(function() {  
   contents.push( this.innerHTML );  
 }); 
$('#anotherDiv').html( contents.join('') );

这样,在each (for)方法,我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中,取代了元素两次获取innerHTML属性等。

(二)学会使用find选择器
jQuery有非常强大的Sizzle引擎来实现选择器,jQuery做了优化,他们能很好的工作,你一般不必担心太多。然而,我们可以稍微做一些改进,将可以使你的脚本略有提高。
一般在jquery中能不要用Sizzle引擎就不要用,当然前面说了只要有可能,就尽量使用.find()方法。比如:
// Fine in modern browsers, though Sizzle does begin "running"  
$('#someDiv p.someClass').hide();  
// Better for all browsers, and Sizzle never inits.    
 $('#someDiv').find('p.someClass').hide(); 
上面两行代码执行的结果是完全一样的,但是下面一句的效率要比上面一句的执行效率高。
现代浏览器(除IE6,IE7)都有QuerySelectorAll支持,能允许你像CSS选择器一样获取对象,而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。
对于IE6/IE7,就需要jQuery使用Sizzle引擎,jQuery会把你的选择器转化成一个数组,并且通过从右往左来迭代匹配。通过正则表达式匹配页面每一个元素,所以你的可以尽量减少选择器的层级,尽可能的使用最右边的选择器,比如使用ID选择器等;这个规则和我们的css的查找规则是一直的,如果你要优化css选择器也要知道这个规则:从右往左来迭代匹配!
尺度把握:
1.保持代码简单
2.尽可能的使用find()查找,使用浏览器的原生查找函数
3.尽可能使用最右边的选择器,比如ID等
分享到:
评论

相关推荐

    12种jQuery代码性能优化方法.pdf

    在编写jQuery代码时,性能优化是一项关键任务,因为高效的代码能提供更好的用户体验,尤其是在处理大量数据或复杂交互时。本文将深入探讨12种优化jQuery代码的方法,旨在提高执行效率和整体性能。 首先,从ID选择器...

    jquery性能优化高级技巧

    jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍: 1.通过CDN(Content Delivery Network)引入jQuery库 2.减少DOM操作 3.适当使用原生JS 4.选择器优化 5.缓存jQuery对象 6.定义一个可以...

    jQuery代码性能优化的10种方法

    在jQuery中最快的选择器是ID选择器 ($(‘#someid’)). 这是因为它直接映射为JavaScript的getElementById()方法。 选择单个元素 <form method=post action=/> <h2>Traffic Light <li><input type=...

    jQuery性能优化(转)

    **jQuery性能优化** jQuery作为一款广泛使用的JavaScript库,极...通过以上方法,我们可以有效地优化jQuery代码,提升网页性能,为用户提供更流畅的浏览体验。在开发过程中,应始终关注性能指标,及时调整和优化代码。

    jQuery性能优化28条建议你值得借鉴

    找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来。我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景。 一、选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器...

    jQuery性能优化指南

    然而,随着网页复杂性的增加,优化jQuery代码以提高性能变得至关重要。以下是一些关于jQuery性能优化的关键知识点,这些内容可能在"jQuery性能优化指南1.htm、jQuery性能优化指南2.htm、jQuery性能优化指南3.htm"中...

    提高jQuery性能优化的技巧

    在现代Web开发中,性能优化是一个永恒不变的话题,尤其对于广泛使用的jQuery库而言,其性能直接关联到用户体验。本文主要探讨了提高jQuery性能的一些优化技巧,这些技巧有助于提升网页的加载速度、交互流畅度和整体...

    超实用的jQuery代码段

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...

    《超实用的jQuery代码段》.(周敏).[PDF]@ckook

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...

    JQuery性能优化指南

    然而,随着网页复杂性的增加,优化jQuery代码以提高性能变得至关重要。本指南将深入探讨如何通过一系列策略提升jQuery项目的性能,使用户体验更加流畅。 一、选择器优化 1. 使用ID选择器:jQuery中的`$("#id")`是最...

    jquery easyui datagrid性能优化

    jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。

    jQuery 性能优化手册 推荐

    《jQuery性能优化手册》是一份指导开发者提升jQuery代码执行效率的重要文档。以下是对其中关键知识点的详细解释: 1. **始终从ID选择器开始继承**:由于JavaScript的`getElementById()`方法是直接针对ID查找元素,...

    关于JQUERY性能的优化

    然而,随着网页复杂性的增加,优化jQuery性能变得至关重要,以确保页面加载速度和用户体验。以下是一些关于jQuery性能优化的关键点: 1. **减少DOM操作**:DOM(Document Object Model)是HTML和XML文档的结构化...

    Jquery性能优化指南

    在进行jQuery性能优化时,有几个关键点可以帮助提升代码运行效率,从而提高网页的加载速度和用户体验。以下是对这些优化策略的详细解释: 1. **总是从 ID 选择器开始继承**: ID选择器是最高效的,因为它直接对应...

    jQuery性能优化指南(1)

    《jQuery性能优化指南》系列文章主要探讨如何提升jQuery代码的执行效率,以达到更好的用户体验。在Web开发中,性能优化是关键,特别是对于用户交互频繁的网页应用,jQuery的高效运用能显著改善页面加载速度和响应...

Global site tag (gtag.js) - Google Analytics