3个简单的事情,使你的jQuery代码变得更加棒

个简单的事情,使你的jQuery代码变得更加棒"
jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白,使用大量CPU周期的所有功能。就像jQuery工程师试图优化jQuery一样,他们的速度总是有限的。作为jQuery的用户,您可以采取一些措施来加快jQuery代码的速度。

1 – jQuery对象缓存

缓存你的jQuery对象可能是你可以做的最好的事情来削减你的代码,以运行更加精简和更新。如果您在代码中多次使用相同的选择器,或者如果您在循环内或在多次运行的函数中查询DOM,那么您可能会从查询中缓存变量中获益。考虑以下3个例子:

//循环
for(var i = 0 ; i < 100 ; i ++){
    $('ul.special').append('<li>' + i + '</ li>');
}
//多个函数,每个都有
//有机会被称为多次
$('#showbutton').on('click',function() {
    $(' #box ').show();
});
$('#hidebutton').on('click',function() {
    $('#box').hide();
});
//只是重新查询
$('p').width(150);
$('p').css('color','red');
$('p').addClass('awesome');

在所有这些情况下,您可以通过将jQuery对象分配给一个变量(通常以美元符号为前缀将其区分为jQuery对象)来保存一些DOM搜索行程,如下所示:

var $ ul = $('ul.special');
for(var i = 0 ; i < 100 ; i ++){
    $ ul.append('<li>' + i + '</ li>');
}
var $ box = $('# box ');
$('#showbutton').on('click',function() {
    $ box.show();
});
$('#hidebutton').on('click',function() {
    $ box.hide();
});
$('p').width(150).css('color','red').addClass('awesome');

你可以做的最昂贵的操作之一就是查询DOM,特别是在不能使用内置函数进行优化的旧版浏览器中。每次查询DOM时(有一些例外),您必须搜索整个DOM以查找每个匹配元素,这可能需要时间,尤其是在大型文档上。第三个示例实际上使用链接,这与缓存类似,因为您仍然优化到一个DOM搜索,但它不要求将jQuery对象保存到变量。

2 – 选择器优化

DOM查询中使用的CSS选择器有时会在性能上比在缺少缓存搜索结果方面有所不同。首先你必须意识到的是,选择器是从右到左阅读的,所以你总是希望你的最具体的选择器(最显着的是id)尽可能地靠右。然而,很多时候,您正在尝试查找带有ID的元素的子元素,因此您不能在完整选择器中将ID选择器放在最右边。有一种解决方法,通过上下文或使用find或children:

//而不是这个:
$('#id p');
//尝试其中之一:
$('p','#id');
$('#id').find('p');
$('#id').children('p')

以下选择器从最快到最慢排列。总是尝试让速度更快的选择器进一步向右或上下文参数中/ find/ children,以尽可能快地进行选择。

  1. $(‘#id’);一个id选择器是最快的选择器。这有两个原因:1)只有一个元素带有id,所以一旦找到它,搜索停止,并且2)浏览器具有内置函数,用于通过它们的id(document.getElementById())搜索元素,在功能上比手工功能要快得多。
  2. $(‘tag’);仅仅因为所有的浏览器都支持被称为的内置函数,所以用标签名称进行搜索有点快document.getElementsByTagName()。
  3. $(‘.class’);通过类进行搜索可能与通过标签名称进行搜索具有可比性,但是您必须小心,因为IE8及其以下版本不支持本地语言document.getElementsByClassName()。
  4. $(‘[attribute]’);或$(‘[attribute=value]’);or $(‘:pseudo’);没有浏览器目前有一个本地函数可供JavaScript用于使用这些选择器进行搜索,因此jQuery需要自行搜索DOM并检查每个元素以查看它是否与此选择器匹配。有一些现代浏览器具有document.querySelectorAll()可以接受任何选择器的本机功能,但即使通过此功能提高了性能,这些选择器的查找仍然很慢。

3 – 委派事件

第三次也是最后的优化涉及事件。如果您将事件处理程序附加到表的每个单元格,则可能会使用比您真正需要更多的内存,并且需要一点时间将处理程序应用于每个单元。这可能是这样做的:

$('table td').on('click',function() {
    // 做一点事
});

事件委托允许我们将一个事件处理程序附加到一个父元素 – 节省我们的内存和设置时间 – 只有在事件触发特定的子元素时才会触发。因此,使用上面的示例,我们可以附加一个处理程序,table只要td有人点击某个th元素,就会触发该处理程序,但当用户单击表中的某个元素时,不会触发该处理程序。执行此操作的代码如下所示:

$('table').on('click','td',function() {
    // 做一点事
});

请注意,您实际上希望事件触发的元素的选择器现在是该on函数的第二个参数。很酷的是,它this仍然指的td是被点击的对象,而不是对象table,就像将处理程序直接附加到单元格一样。这还带来了额外的好处,即如果动态地添加更多表格单元格,则不需要向它们添加事件处理程序,因为它们已由父元素覆盖。

结尾

所以有三种方法可以成为更加棒的前端开发程序员。我知道这个话题已经在互联网上被无数次地讨论过了,但是你永远不知道什么时候你会碰到一个没有听说过这些话的人。此外,它永远不会被提醒。所以,请记住缓存,使用快速选择器,并委派你的事件,以获得各地的jQuery编程专业人员的尊重。

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/experience/969.html

发表评论

登录后才能评论