效能調優的最佳實踐【jQuery基本原理】
阿新 • • 發佈:2018-12-15
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');
6、使用事件委託:
// 如果列表裡面元素很多,不堪想象
$('li.trigger').click(handlerFn);
// 這樣寫好一點,用 $.fn.live 做事件委派
$('li.trigger').live('click', handlerFn);
// 最好的做法,用 $.fn.delegate 做事件委派,還可以指定一個上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);
七、將元素detach出來再操作
var $table = $('#myTable');
var $parent = $table.parent();
$table.detach();
// ... 新增大量的行到表格中去
$parent.append(table);
八、使用樣式表給大量元素新增CSS
// 操作大於 20 個元素是不錯的,但少於時就不值了
$('a.swedberg').css('color', '#asd123');
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
.appendTo('head');
九、使用$.data而不是$.fn.data
// 常規寫法
$(elem).data(key,value);
// 快 10 倍
$.data(elem,key,value);
十、變數定義
// 老套的寫法
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);
// 新鮮的寫法
var test = 1,
test2 = function() { ... },
test3 = test2(test);
在自執行的函式中,變數定義可以完全省掉。
(function(foo, bar) { ... })(1, 2);