いくつかの比較的良いjquery最適化
1247 ワード
1.選択:優先的に#idを使用し、.classの前にtag名を付け、複数回の操作は変数で保存(またはチェーン操作)します.
2.sizzle:1.3以降に採用されたセレクタエンジンは、従来の「左から右へ」の代わりに「右から左へ」を採用しており、右のセレクタは$('div.class span.class 2')などより明確であるため、セレクタを書く際に考慮する必要がある.
3.イベントのバインド時にbind()の代わりにlive()/delegate()を使用する
4.dom操作時にdom->を先に取り出すことができる.操作dom—>もとの位置にもどる
html 5には多くのユニークなtagが増加し、より多くのtagは特定のtagに対して共通に使用される要素が少ないことを示している.
セレクタエンジンのパフォーマンスが向上
7.スタイルを大量に追加する場合、$.css()よりもレンダリング要素を使用するとよい
9.jsの元の方法の方が効率的である場合がある
10.map()、slice()、stop()、queue()、dequeue()、prevAll()、pushStack()、inArray().
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().