いくつかの比較的良いjquery最適化

1247 ワード

1.選択:優先的に#idを使用し、.classの前にtag名を付け、複数回の操作は変数で保存(またはチェーン操作)します.
2.sizzle:1.3以降に採用されたセレクタエンジンは、従来の「左から右へ」の代わりに「右から左へ」を採用しており、右のセレクタは$('div.class span.class 2')などより明確であるため、セレクタを書く際に考慮する必要がある.
3.イベントのバインド時にbind()の代わりにlive()/delegate()を使用する
4.dom操作時にdom->を先に取り出すことができる.操作dom—>もとの位置にもどる

var theForm = $('#myForm'); 
var formParent = theForm.parent(); 
theForm.remove(); 
inputArr.each(function() { 
     theForm.append(this); 
});  
formParent.append(theForm);
//or detach().doSomething().appendTo();
5.find()はコンテキストより優れている

var panels = $('div.panel', $('#content')); 
var panels = $('#content').find('div.panel');//better
6.html 5で
html 5には多くのユニークなtagが増加し、より多くのtagは特定のtagに対して共通に使用される要素が少ないことを示している.
セレクタエンジンのパフォーマンスが向上
7.スタイルを大量に追加する場合、$.css()よりもレンダリング要素を使用するとよい

$('<style type="text/css"> div.class { color: red; } </style>') .appendTo('head');
8.多用対象検出
9.jsの元の方法の方が効率的である場合がある
10.map()、slice()、stop()、queue()、dequeue()、prevAll()、pushStack()、inArray().