性能调优的最佳实践【jQuery基本原理】

最新推荐文章于 2025-12-23 14:28:15 发布

翻译最新推荐文章于 2025-12-23 14:28:15 发布 · 176 阅读

文章标签：

#jQuery #JS

前端同时被 3 个专栏收录

17 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文分享了十个实用的技巧，旨在帮助开发者提高使用jQuery时的网页性能，包括缓存长度、合理操作DOM、代码优化、事件委托、元素剥离、CSS应用、数据属性使用等，适合所有希望提升网站响应速度的前端开发者。

1、循环中缓存length

var myLength = myArray.length;

for (var i = 0; i < myLength; i++) {
    // do stuff
}

2、在循环外使用append，避免过于频繁操作DOM

// 别这样...
$.each(myArray, function(i, item) {
   var newListItem = '<li>' + item + '</li>';
   $('#ballers').append(newListItem);
});

// 好的做法是这样的
var frag = document.createDocumentFragment();

$.each(myArray, function(i, item) {
    var newListItem = '<li>' + item + '</li>';
    frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);

// 或者这样的
var myHtml = '';

$.each(myArray, function(i, item) {
    html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);

3、保持代码的整洁干练，优化

// 丑
if ($eventfade.data('currently') != 'showing') {
    $eventfade.stop();
}

if ($eventhover.data('currently') != 'showing') {
    $eventhover.stop();
}

if ($spans.data('currently') != 'showing') {
    $spans.stop();
}

// 漂亮！！
var $elems = [$eventfade, $eventhover, $spans];
$.each($elems, function(i,elem) {
    if (elem.data('currently') != 'showing') {
        elem.stop();
    }
});

4、控制匿名函数，组织封装

// 纠结
$(document).ready(function() {
    $('#magic').click(function(e) {
        $('#yayeffects').slideUp(function() {
            // ...
        });
    });

    $('#happiness').load(url + ' #unicorns', function() {
        // ...
    });
});

// 清爽
var PI = {
    onReady : function() {
        $('#magic').click(PI.candyMtn);
        $('#happiness').load(PI.url + ' #unicorns', PI.unicornCb);
    },

    candyMtn : function(e) {
        $('#yayeffects').slideUp(PI.slideCb);
    },

    slideCb : function() { ... },
  
    unicornCb : function() { ... }
};

$(document).ready(PI.onReady);

5、优化选择器

//  快
$('#container div.robotarm');

// 非常快
$('#container').find('div.robotarm');

选择器的右侧部分应该尽可能具体，左侧则不需要那么具体。

// 未优化的

$('div.data .gonzalez');

// 优化过的

$('.data td.gonzalez');

避免过度的具体

$('.data table.attendees td.gonzalez');


// 如果可以不写中间的部分会更好

$('.data td.gonzalez');

清爽的 DOM 结构也有助于改善选择器的性能，选择器引擎可以少跑几层去寻觅那个元素了。

6、使用事件委托：

事件委派让你可以给一个容器元素（如一个无序列表）绑定事件处理器，而不需给容器内每个元素（如列表中的一项）都去绑定。jQuery 提供 $.fn.live 和 $.fn.delegate 使实现起来变得很简单。你应该尽量使用 $.fn.delegate 而不是 $.fn.live，因为它消除了那些不必要的选择过滤过程，而且其明确的上下文（相对于 $.fn.live 的上下文是 document 来说的）减少了大约 80% 的开销。

除了有性能提升的好处，事件委派也使你在往容器里添加新元素时无需重新绑定事件，因为已经有了。

// 如果列表里面元素很多，不堪想象
$('li.trigger').click(handlerFn);

// 这样写好一点，用 $.fn.live 做事件委派
$('li.trigger').live('click', handlerFn);

// 最好的做法，用 $.fn.delegate 做事件委派，还可以指定一个上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);

七、将元素detach出来再操作

DOM 操作是慢的，你应该尽量避免去操作它。jQuery 在 1.4 版引入了 $.fn.detach 来帮助解决这个问题：让你可以先将元素从 DOM 树中剥离出来再进行操作。

var $table = $('#myTable');
var $parent = $table.parent();

$table.detach();
// ... 添加大量的行到表格中去
$parent.append(table);

八、使用样式表给大量元素添加CSS

如果你在用 $.fn.css 给多于 20 个元素修改 CSS，考虑一下添加一个 style 标签，这样可以速度可以提升 60%。

// 操作大于 20 个元素是不错的，但少于时就不值了
$('a.swedberg').css('color', '#asd123');
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
    .appendTo('head');

九、使用$.data而不是$.fn.data

将 $.data 应用于 DOM 元素比直接调用 jQuery 选择结果的 $.fn.data 要快上 10 倍。虽然，这要先确定你是理解 DOM 元素与 jQuery 选择结果之间的区别的。

// 常规写法
$(elem).data(key,value);  

// 快 10 倍
 $.data(elem,key,value);

十、变量定义

变量可以定义在一个 statement 内，用不着多个。

// 老套的写法
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);

// 新鲜的写法
var test = 1,
    test2 = function() { ... },
    test3 = test2(test);
在自执行的函数中，变量定义可以完全省掉。

(function(foo, bar) { ... })(1, 2);