`
skudy
  • 浏览: 19650 次
  • 性别: Icon_minigender_1
  • 来自: 江西
社区版块
存档分类
最新评论

8个能够有效帮助你提高jQuery代码性能(performance)的技巧

 
阅读更多
来源http://www.gbin1.com/technology/jquery/20120222jqueryxingneng/index.html

选择器Selector的使用

id > tagname > attrName > class > 伪类

链式调用(chaining)

对处理多个方式时 只需要查询一次jquery 对象
  如
 $('jq').hide().show().css('color',red);

   和
$('jq').hide(); $('jq').show();$('jq').css();


缓存caching

如上
 var jq = $('jq');
     jq.hide(); jq.show();jq.css();

但 编写代码时请不要随便创建对象。

事件代理

使用 $.on('click',function(){}) 代替 $.click(function(){});
前者 将整个事件监听封转到一个便利方法中
后者 为所有对象绑定事件

循环语句中的DOM操作

var data = ["Saab","Volvo","BMW"];
$.each(data, function(i, item){
  var newitem='<div>' + item + '</div>';
  $("#gbcontainer").append(newitem);  
});



var data = ["Saab","Volvo","BMW"];
    tmp = ''; 
$.each(data, function(i, item){
    tmp +='<div>' + item + '</div>';
});
$("#gbcontainer").append(tmp);    


使用第二种操作
分享到:
评论

相关推荐

    精通jquery第二版源代码

    《精通jQuery第二版》源代码是一份深入学习jQuery库的重要资源,它包含了书中每一章节的详细代码示例,旨在帮助开发者全面理解并掌握jQuery的核心功能和高级技巧。jQuery是一款广泛应用于网页开发的JavaScript库,它...

    JQuery权威指南源代码

    7. **性能优化(Performance Optimization)**:源代码中也会涉及如何使用`$()`的缓存机制、减少DOM操作、合理使用事件委托等技巧来提高jQuery应用的性能。 通过深入研究《jQuery权威指南》的源代码,你将能掌握...

    jquery实用教程

    这个“jQuery实用教程”将引导你深入理解jQuery的核心概念和实用技巧,帮助你提升网页开发效率。 首先,jQuery的核心理念是“Write Less, Do More”,它通过简化JavaScript的DOM操作、事件处理、动画效果和Ajax交互...

    jquery api html

    8. **效率优化(Performance Optimization)**:了解如何有效地使用`$(document).ready()`、避免DOM遍历、减少HTTP请求等,可以提高网页性能。 学习并熟练掌握jQuery API对于前端开发者来说是非常有益的,它不仅能...

    jQuery UI 1.7(2009).pdf

    7. **Best Practices(最佳实践)**:Dan Wellman结合自己多年的开发经验,分享了使用jQuery UI的最佳实践,包括代码组织、调试技巧、避免常见错误等方面,帮助开发者更高效地工作。 #### 结论 《jQuery UI 1.7》...

    锋利的JQuery源码

    《锋利的JQuery源码》是一本深入解析jQuery库的专著,旨在帮助开发者更好地理解和运用这个强大的JavaScript库。这本书包含多个章节,每个章节都深入探讨了jQuery的核心功能和扩展应用,通过阅读源码,我们可以了解到...

    jQuery文档

    9. **性能优化(Performance Optimization)**:了解如何有效利用jQuery的`$`对象缓存、事件代理以及选择器优化等技巧,可以提升页面性能。 在"14jQuery插件-上课实例.rar"中,可能包含了实际的项目案例,这些案例...

    jquery_api.rar_JQuery_api_javascript_jquery

    - **性能优化(Performance Optimization)**:尽管jQuery简化了代码,但也需注意性能问题。避免在循环中使用jQuery选择器,优先使用ID选择器,以及利用事件委托等技巧来提升性能。 **资源链接与社区支持** - `...

    《锋利的jQuery》实例源码.zip

    8. **性能优化(Performance Optimization)**:源码中可能会涉及如何避免DOM遍历的性能瓶颈,合理使用事件委托,以及优化动画效果等提高jQuery应用性能的方法。 9. **版本兼容(Version Compatibility)**:jQuery...

    jquery的简单实用

    jQuery的一大特色是链式操作,一个选择器可以连接多个方法,如`$("#element").addClass("highlight").css("color", "red")`,这在编写代码时提高了可读性和效率。 7. **插件(Plugins)** jQuery生态系统中有无数...

    锋利的jquery实例源码

    7. **优化与性能(Optimization and Performance)**:书中可能涵盖了如何避免DOM操作的过度使用,合理使用缓存,以及利用事件委托等技巧来提升jQuery代码的运行效率。 8. **兼容性和版本更新(Compatibility and ...

    Jquery1.6中文API

    9. **性能优化(Performance Optimization)**:1.6版本对多个API进行了优化,例如`live()`和`delegate()`的合并为`.on()`,提高了事件处理的性能。 10. **API文档(Documentation)**:jQuery 1.6的中文API文档...

    jQuery in Action 示例

    在"jQuery in Action 示例"中,我们将深入探讨jQuery的核心概念和实用技巧,帮助你更好地理解和应用这个强大的工具。 1. **选择器(Selectors)** jQuery 的选择器类似于CSS,用于选取HTML元素。例如,`$("#myID")...

    jquery经典教程第五章节

    8. **性能优化(Performance Optimization)**:了解如何编写高效的jQuery代码同样重要,如使用$(document).ready()代替window.onload,减少DOM操作,以及使用 delegated event handling(委托事件处理)来提升性能...

    JQuery1.9标签库

    1. **API更新(API Changes)**: jQuery 1.9移除了部分过时的API,如`.live()`, `.die()`, `.delegate()`, `.undelegate()`, 以及一些不再推荐使用的属性和方法,以提高代码质量和性能。 2. **兼容性提升...

    Learning JQuery 1.3(英文).pdf

    8. **性能优化(Performance Optimization)**:书中会讲解如何利用jQuery的特性提高代码执行效率,比如使用ID选择器而非类选择器,减少DOM操作次数等。 9. **API参考(API Reference)**:书中包含了完整的JQuery ...

    jQuery经典使用15例

    14. **性能优化(Performance Optimization)**:学习如何减少DOM操作次数、缓存jQuery对象、使用事件委托等技巧来提升页面性能。 15. **兼容性处理(Compatibility Handling)**:jQuery对旧版浏览器提供了一定...

    jQueryAPI-100214.rar_javascript

    这个名为 "jQueryAPI-100214" 的压缩包包含了一份详细的 jQuery API 参考手册(jQueryAPI-100214.chm),这将帮助我们深入理解并有效利用 jQuery 的强大功能。 ### 1. **选择器(Selectors)** jQuery 的核心是其...

    jQuery1.4.1及中文API

    9. **性能优化(Performance Optimization)**: jQuery 1.4.1版本对内部代码进行了优化,提升了执行效率,特别是在选择器和DOM操作上的性能。 10. **兼容性(Compatibility)**: jQuery 1.4.1广泛支持各种浏览器,...

    jQuery1.2API中文版(html版).rar

    8. **效率优化(Performance Optimization)**:jQuery1.2版本注重性能,例如,使用`live()`方法处理动态添加的元素,但后来的版本中被`on()`取代,因为`on()`在性能上更优。 9. **兼容性(Compatibility)**:...

Global site tag (gtag.js) - Google Analytics