正文

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

author  author  2022-08-09  334

关键词：

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

在jQuery中最快的选择器是ID选择器 ($(‘#someid‘)). 这是因为它直接映射为JavaScript的getElementById()方法。

选择单个元素

<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的性能不好的一种方式：

1、var traffic_button = $(‘#content .button‘);

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

1、var traffic_button = $(‘#traffic_button‘);

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

1、var traffic_lights = $(‘#traffic_light input‘);

2、在Classes前面使用Tags

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

<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传下来）

1、var active_light = $(‘#traffic_light input.on‘);

注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。例如，它会因为去循环所有的<div>元素去寻找ID为content的<div>，而导致很慢。

1、var content = $(‘div#content‘);

按照同样的思路，从多个ID传下来是冗余的。

1、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结果对象，就可以在其它的函数里引用它。

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;）

前端性能优化jquery性能优化

一、使用合适的选择器$("#id");1.使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById();如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法，代码如下：$("#domo"... 查看详情

「offer来了」快来关注这些性能优化问题(代码片段)

「面试专栏」前端面试之性能优化篇💬序言💯思维导图抢先看👁️‍🗨️一、html、css、js、jq优化1、针对HTML，如何优化性能？2、针对CSS，如何优化性能？3、哪些方法能提升移动端CSS3动画体验&#x... 查看详情

「offer来了」快来关注这些性能优化问题(代码片段)

常见前端性能优化的35种方法总结

...少http请求的数量，合并公共资源、使用雪碧图、合并代码块、按需加载资源减少传输总量或加快传输速度优化图片的加载展示策略，根据网络状况加载图片、图片格式优化、图片展示位置优化减少cookie体积使用更有效的... 查看详情

10种优化页面加载速度的方法——转

...用户体验。这里列出了10种方法，可以快速提升你网站的性能。　1.优化图像　　图像对于吸引访客的关注是很重要的。但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上。这无疑增加了页面的加载... 查看详情

性能优化篇：几种简单的访存优化手段(代码片段)

性能优化篇（1）：几种简单的访存优化手段Author:stormQSunday,10.November201911:36AM目录减少不必要的内存引用按顺序访问数据按顺序存储同时要访问的数据减少不必要的内存引用示例：voidpoor(constint*src,intn,int*dest)for(inti&... 查看详情

jquery的性能优化

适当使用原生JS创建jQuery对象会带来一些开销。所以，如果比较注重性能的话，尽可能使用原生的javascript。在某些方面可能会更容易理解和写更少的代码。例如：//打印list中的li的id$(‘#colorsli‘).each(function(){//将$(this).attr(‘id‘)... 查看详情

性能优化方法论系列三性能优化的核心思想(代码片段)

3.3提高资源利用率3.3.1空间换时间空间换时间是性能优化最常用的手段之一。其中缓存就是空间换时间的一种典型应用。CPU缓存、浏览器缓存、CDN缓存、DNS缓存、内存缓存、Redis缓存等，它们都是将数据缓存在离使用者更近的... 查看详情

5种kafka消费端性能优化方法

...要：带你了解基于FusionInsightHD&MRS的5种kafka消费端性能优化方法。本文分享自华为云社区《FusionInsightHD&MRSkafka消费端性能优化方法》，作者：穿夹克的坏猴子。kafka消费端性能优化主要从下面几个方面优化：1.... 查看详情

jquery性能优化

1，总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。例如有一段HTML代码：<divid="content">　　<formmethod="post"action="#">　　　　<h2>交通信号灯</h2>　　　　<... 查看详情

hbase性能优化方法总结(代码片段)

1.表的设计1.1Pre-CreatingRegions默认情况下，在创建HBase表的时候会自动创建一个region分区，当导入数据的时候，所有的HBase客户端都向这一个region写数据，直到这个region足够大了才进行切分。一种可以加快批量写入速度的方法是通... 查看详情

5种kafka消费端性能优化方法

...要：本文讲述基于FusionInsightHD&MRS的五种kafka消费端性能优化方法。本文分享自华为云社区《FusionInsightHD&MRS：kafka消费端性能优化方法》，作者：穿夹克的坏猴子。kafka消费端性能优化主要从下面几个方面优化... 查看详情

干货|c++的性能优化(代码片段)

置顶/星标公众号????，硬核文章第一时间送达！前言性能优化不管是从方法论还是从实践上都有很多东西，从C++语言本身入手，介绍一些性能优化的方法，希望能做到简洁实用。实例1在开始本文的内容之... 查看详情

性能优化方法论系列三性能优化的核心思想(代码片段)

性能优化方法论系列目录《一、性能优化的本质》《二、性能优化方法论的思想源泉》《三、性能优化的核心思想（1）》《三、性能优化的核心思想（2）》《三、性能优化的核心思想（3）》《四、性能优... 查看详情

jquery性能优化

jquery性能优化　　作为一个刚毕业的小白，刚刚工作了一段时间，因为工作地域的原因又开始使用jquery了，工作中遇到了一些性能优化的问题，所以特意总结下来，作为我的第一篇博客小小留个念想的。　　　　1.选择合适... 查看详情

性能优化方法论系列三性能优化的核心思想(代码片段)

java序列化10倍性能优化对比测试(代码片段)

今天分享Java对象序列化的不同方法，并对不同序列化方式的性能进行基准测试。关于持久队列来讲，必须将Java堆内存的对象转换成文件中的二进制数据，对象序列化的性能将显著影响整体的性能表现。相当多的高性能框架都会... 查看详情