`
sunrenen
  • 浏览: 40182 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery优化

阅读更多
之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度,下面列举11个更有效的使用jQuery库:



1、总是使用#id去寻找element.

在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素
Java代码 复制代码
  1. <div id="content">   
  2.   
  3.     <form method="post" action="/">   
  4.   
  5.         <h2>Traffic Light</h2>   
  6.   
  7.         <ul id="traffic_light">   
  8.   
  9.             <li><input type="radio" class="on" name="light" value="red" /> Red</li>   
  10.   
  11.             <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>   
  12.   
  13.             <li><input type="radio" class="off" name="light" value="green" /> Green</li>   
  14.   
  15.         </ul>   
  16.   
  17.         <input class="button" id="traffic_button" type="submit" value="Go" />   
  18.   
  19.     </form>   
  20.   
  21. </div>  
<div id="content">

    <form method="post" action="/">

        <h2>Traffic Light</h2>

        <ul id="traffic_light">

            <li><input type="radio" class="on" name="light" value="red" /> Red</li>

            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

            <li><input type="radio" class="off" name="light" value="green" /> Green</li>

        </ul>

        <input class="button" id="traffic_button" type="submit" value="Go" />

    </form>

</div>



选择button的性能不好的一种方式:

var traffic_button = $('#content .button');

取而代之的是直接选择button:

var traffic_button = $('#traffic_button');

选择多个元素

在我们讨论选择多个元素的时候,我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失, 总是使用最近的父ID去寻找。

var traffic_lights = $('#traffic_light input');
2、在Classes前面使用Tags

在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。


Java代码 复制代码
  1.   
  2. <div id="content">   
  3.   
  4.     <form method="post" action="/">   
  5.   
  6.         <h2>Traffic Light</h2>   
  7.   
  8.         <ul id="traffic_light">   
  9.   
  10.             <li><input type="radio" class="on" name="light" value="red" /> Red</li>   
  11.   
  12.             <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>   
  13.   
  14.             <li><input type="radio" class="off" name="light" value="green" /> Green</li>   
  15.   
  16.         </ul>   
  17.   
  18.         <input class="button" id="traffic_button" type="submit" value="Go" />   
  19.   
  20.     </form>   
  21.   
  22. </div>  
<div id="content">

    <form method="post" action="/">

        <h2>Traffic Light</h2>

        <ul id="traffic_light">

            <li><input type="radio" class="on" name="light" value="red" /> Red</li>

            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

            <li><input type="radio" class="off" name="light" value="green" /> Green</li>

        </ul>

        <input class="button" id="traffic_button" type="submit" value="Go" />

    </form>

</div>



总是在一个Class前面加上一个tag名字(记得从一个ID传下来)

var active_light = $('#traffic_light input.on');注意:在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。例如,它会因为去循环所有的<div>元素去寻找ID为content的<div>,而导致很慢。

var content = $('div#content');按照同样的思路,从多个ID传下来是冗余的。

var traffic_light = $('#content #traffic_light');
3、缓存jQuery对象

养成保存jQuery对象到一个变量上(就像上面的例子)的习惯。例如,不要这样做:

$('#traffic_light input.on).bind('click', function(){...});

$('#traffic_light input.on).css('border', '3px dashed yellow');

$('#traffic_light input.on).css('background-color', 'orange');

$('#traffic_light input.on).fadeIn('slow');

取而代之,首现保存jQuery变量到一个本地变量后,再继续你的操作。

var $active_light = $('#traffic_light input.on');

$active_light.bind('click', function(){...});

$active_light.css('border', '3px dashed yellow');

$active_light.css('background-color', 'orange');

$active_light.fadeIn('slow');

提示:使用$前辍表示我们的本地变量是一个jQuery包集。记住,不要在你的应该程序里出现一次以上的jQuery重复的选择操作。 额外提示:延迟存储jQuery对象结果。

如果你想在你的程序的其它地方使用jQuery结果对象(result object(s)),或者你的函数要执行多次,要把它缓存在一个全局范围的对象里。通过定义一个全局容器保存jQuery结果对象,就可以在其它的函数里引用它。

// Define an object in the global scope (i.e. the window object)

window.$my ={

    // Initialize all the queries you want to use more than once

    head : $('head'),

    traffic_light : $('#traffic_light'),

    traffic_button : $('#traffic_button')};

function do_something(){

    // Now you can reference the stored results and manipulate them

    var script = document.createElement('script');

    $my.head.append(script);

    // When working inside functions, continue to save jQuery results

    // to your global container.

    $my.cool_results = $('#some_ul li');

    $my.other_results = $('#some_table td');

    // Use the global functions as you would a normal jQuery result

    $my.other_results.css('border-color', 'red');

    $my.traffic_light.css('border-color', 'green');

}
4、更好的利用链

前面的例子也可以这样写:

var $active_light = $('#traffic_light input.on');

$active_light.bind('click', function(){...})

    .css('border', '3px dashed yellow')

    .css('background-color', 'orange')

   .fadeIn('slow');

这样可以让我们写更少的代码,使JavaScript更轻量。


5、使用子查询

jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

<div id="content">

    <form method="post" action="/">

        <h2>Traffic Light</h2>

        <ul id="traffic_light">

            <li><input type="radio" class="on" name="light" value="red" /> Red</li>

            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

            <li><input type="radio" class="off" name="light" value="green" /> Green</li>

        </ul>

        <input class="button" id="traffic_button" type="submit" value="Go" />

    </form>

</div>

例如,我们可以利用子查询缓存active和inactive lights以便后面的操作。

var $traffic_light = $('#traffic_light'),  

$active_light = $traffic_light.find('input.on'),  

$inactive_lights = $traffic_light.find('input.off');

提示:可以用逗号隔开一次定义多个本地变量,这样可以节省一些字节。


6、限制直接对DOM操作

DOM操作的基本做法是在内存中创建DOM结构,然后再更新DOM结构。这不是jQuery最好的做法,但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。 例如,如果你需要动态创建一列元素,不要这样做:

var top_100_list = [...], // assume this has 100 unique strings  

$mylist = $('#mylist'); // jQuery selects our <ul> element

for (var i=0, l=top_100_list.length; i<l; i++){  

    $mylist.append('<li>' + top_100_list[i] + '</li>');

}

取而代之,我们希望在插入DOM结构之前先在一个字符串里创建一套元素。
代码

var top_100_list = [...], // assume this has 100 unique strings  

$mylist = $('#mylist'), // jQuery selects our <ul> element  

top_100_li = ""; // This will store our list items

for (var i=0, l=top_100_list.length; i<l; i++){

    top_100_li += '<li>' + top_100_list[i] + '</li>';

}

$mylist.html(top_100_li);

更快的做法,在插入DOM结构之前我们应该总是在一个父节点里包含许多元素

var top_100_list = [...], // assume this has 100 unique strings  

$mylist = $('#mylist'), // jQuery selects our <ul> element  

top_100_ul = '<ul id="#mylist">'; // This will store our entire unordered list

for (var i=0, l=top_100_list.length; i<l; i++){

    top_100_ul += '<li>' + top_100_list[i] + '</li>';

}

top_100_ul += '</ul>'; // Close our unordered list

$mylist.replaceWith(top_100_ul);

如是你照着上面的做了还是对性能有些迷惑的话,可以参考以下内容:

* 试一下jQuery提供的Clone()方法。Clone()方法创建节点数的拷贝,随后你可以在这个副本中进行操作。

* 使用DOM DocumentFragments. As the creator of jQuery points out, 比直接操作DOM性能上更好. 先创建你需要的结构(就像我们上面用一个字符串做的一样), 然后使用jQuery的 insert or replace methods.

7、事件委托(又名:冒泡事件)

除 非特别说明,每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是你可以只对它们的父级绑定一次,而且可以计算出是哪一个节点触发了事件,而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如,假如我们要开发一个包含很多input的大型form,当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的:

$('#myList li).bind('click', function(){

    $(this).addClass('clicked');    // do stuff

});

反而,我们应该在父级侦听click事件。

$('#myList).bind('click', function(e){

    var target = e.target, // e.target grabs the node that triggered the event.

        $target = $(target);  // wraps the node in a jQuery object

    if (target.nodeName === 'LI') {

        $target.addClass('clicked');        // do stuff

    }

});

父节点担当着发报机的工作,可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上,那么你这种做法是不正确的。

8、消除查询浪费

虽然jQuery对没有找到任何匹配的elements处理的很好,但是它还是需要花费时间去查找的。如果你的站点有一个全局的JavaScript,你可能会把每个jQuery function都放在 $(document).ready(function(){ // all my glorious code })里。不要这样做。只去放一些页面上适合用到的function。这样做最有效的方式是你的模板可以完全控制任何时候或者地方执行JavaScript以内联脚本的方式初始化function。例如,在你的“article”页面模板里,你可能在body标签关闭之前包含以下代码

<script type="text/javascript>mylib.article.init();</script></body& gt;如果你的页面模板包含多种有可能在页面或者不在页面上的模块,或者为了可视化效果你需要它们稍后再初如化,你应该在这些模块之后立即放置初如化函数。

<ul id="traffic_light">

    <li><input type="radio" class="on" name="light" value="red" /> Red</li>

    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

    <li><input type="radio" class="off" name="light" value="green" /> Green</li>

</ul>

<script type="text/javascript>mylib.traffic_light.init();</script>

你的全局JavaScript库看起来应该是这样的:

var mylib ={

    article_page :    {

        init : function()        {

            // Article page specific jQuery functions.

       }

    },

   traffic_light :    {

        init : function()        {

            // Traffic light specific jQuery functions.

       }

    }

}

9、遵从$(windows).load

有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用,它在页面呈现时发生,虽然其它对象还在下载中。如果你发现你的页面在下载中停顿,就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率,它是在所有HTML(包括iframe内容)都下载完以后才去调用所有对象的。

$(window).load(function(){

    // jQuery functions to initialize after the page has loaded.

});

多余的功能,如拖拽、帮定可视化效果和动画、预读取图片等,使用这种方法比较好。



10、压缩JS

虽然和jQuery无关,但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势,这对开发者来讲是必不可少的,但对普通用户来讲没有任何关系。不用什么借口,是时候把JS压缩纳入我们的工作流程中来了。注释你的代码,在投放到生产环境之前找一个压缩工具进行压缩。使用 YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验,它可以安全的把JavaScript压缩的尽可能小,而不会多占用CPU。小提示:为了在 YUICompressor里最大化压缩,应该这样这样定义变量(例如:var my_long_variable_name;)



11、学习jQuery API库文档

学习和最有效的使用jQuery,最好的方法就是去查jQuery的文档了,可以当作手册来用。
分享到:
评论

相关推荐

    jquery优化完整的切页展示资源

    本资源"jquery优化完整的切页展示资源"专注于提供一种主流的、具有完美切页体验的解决方案,即jQuery-Tabs。这个组件能够帮助开发者构建出优雅的、易于导航的多面板视图,适用于展示各种内容,如产品介绍、新闻列表...

    一次失败的jQuery优化尝试小结

    ### jQuery优化尝试的知识点总结 #### jQuery库的DOM操作性能讨论 在前端开发领域,jQuery曾经是一款极为流行的JavaScript库,它简化了对HTML文档的遍历和操作、事件处理、动画以及Ajax交互等功能。然而,对于...

    jquery性能优化高级技巧

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

    [JQuery菜鸟到忍者].Sitepoint.jQuery.Novice.to.Ninja.Feb.2010.pdf

    - **重点**:介绍了如何使用jQuery优化图片加载过程,减少页面加载时间;此外,还讨论了如何创建动态的幻灯片显示效果,提高用户体验。 **5. Menus, Tabs, Tooltips, and Panels** - **内容**:本章涵盖了网页上...

    各种的jQuery版本和1.7的文档

    - jQuery 1.32:在这个版本中,jQuery优化了DOM操作,提高了性能,并修复了一些已知的bug。同时,它也引入了新的API,如`.live()`方法,使得事件处理更加灵活。 - jQuery 1.4:该版本带来了更多的DOM操作方法,如`...

    《jQuery+BootstrapWeb开发案例教程(在线实训版)》案例源码.zip

    6. **性能优化**:源码还可能包含了如何使用jQuery优化DOM操作、减少HTTP请求、延迟加载和缓存策略等技巧,这些都是提高Web应用性能的关键。 通过研究这个压缩包中的源码,你可以获得实际项目经验,理解jQuery和...

    jQuery性能优化(转)

    **jQuery性能优化** jQuery作为一款广泛使用的JavaScript库,极大地简化了网页中的DOM操作、事件处理、动画制作等任务。然而,随着网站复杂性的增加,优化jQuery代码以提高页面加载速度和用户体验变得至关重要。...

    JQuery核心源码_全套1.5_2.0.2

    到了1.8版本,jQuery优化了动画效果,特别是对于复杂的动画序列,性能有显著提升。同时,$.ajax()方法也进行了升级,支持JSONP请求的自动处理,使得跨域数据获取更为便捷。 1.9版本主要是对API进行了一次大规模的...

    Packt Publishing ASP.NET jQuery Cookbook (2011)

    使用jQuery优化用户界面 在《ASP.NET jQuery Cookbook》中,作者详细介绍了一系列技巧,用以优化ASP.NET应用的用户界面。这包括使用jQuery进行DOM操作,创建动态表单,以及实现平滑的动画效果等。例如,书中可能会...

    jQuery从菜鸟到忍者书籍源码

    通过学习《jQuery从菜鸟到忍者》这本书籍,读者不仅可以掌握jQuery的基本用法,还能了解到如何利用jQuery优化网页性能,提升用户体验。书中提供的源码示例涵盖了上述所有知识点,是学习和实践jQuery的宝贵资源。同时...

    Pro PHP and jQuery Second Edition

    - 如何通过jQuery优化用户交互体验。 3. **PHP与jQuery的结合**: - 如何在PHP应用程序中集成jQuery,实现前后端分离的架构设计。 - 使用PHP处理jQuery发送的AJAX请求,进行数据交换。 - 实现复杂的前端功能,...

    锋利的jquery+第2版

    9. **性能优化**:学习如何利用jQuery优化代码,减少DOM操作,使用 delegated events 和 cache selector 等技巧提高页面性能。 10. **与其它库的兼容**:jQuery与许多其他JavaScript库(如Bootstrap、AngularJS等)...

    锋利的jQuery第2版源码

    8. **性能优化**:书中可能讨论了如何利用jQuery优化页面性能,比如使用`$(document).ready()`替代`window.onload`,以及如何有效地选择和操作元素以减少DOM遍历。 9. **模块化开发**:随着前端开发的复杂度增加,...

    jquery1.5.2下载

    - 在1.5.2版本中,jQuery优化了对DOM元素的选择和处理,提高了性能。 - 对于Ajax请求,增加了更好的错误处理机制和支持JSONP请求的跨域处理。 - 引入了对Deferred对象的支持,方便处理异步操作的顺序和依赖。 7....

    ajax框架jquery_1.4.3包含压缩版和未压缩版

    在这一版本中,jQuery优化了许多核心函数,比如选择器引擎、DOM操作和事件处理,使其运行更高效。此外,它还对错误处理进行了改进,增强了AJAX请求的处理能力。 **压缩版与未压缩版的区别** 在提供的文件中,有两...

    很赞的jquery学习资料

    3. jQuery优化了页面的加载过程,使用$(document).ready方法可以在DOM结构加载完成后立即执行,不必等待所有资源的加载,有助于提高页面响应速度。 4. 通过具体实例,如“双色表格”的创建,可以看出jQuery在简化...

    jquery总结学习资料

    - **使用jQuery简化Ajax开发**:讲解如何利用jQuery优化Ajax操作。 ### 五、jQuery的优势 jQuery的出现,降低了JavaScript开发的门槛,使得开发者可以专注于功能实现,而不是浏览器兼容性问题。它强大的功能和丰富...

Global site tag (gtag.js) - Google Analytics