1. まとめトップ

jQuery/JavaScriptの高速化テクニックまとめ

Javascriptや、jQueryなどのフレームワークを利用する際の高速化テクニックのまとめ。知っているのと知らないのとでは、インターフェースの使い心地に大きく差が出るところです。

更新日: 2012年12月19日

kurechonさん

  • このまとめをはてなブックマークに追加
98 お気に入り 75479 view
お気に入り追加

※はてブコメで頂いたご指摘も後半に付け加えました。

jQueryの高速化テクニック

常に#ID から辿る

jQueryで要素を選択する最速の方法は、IDによるものです。

$('#content').hide();
$('#content p').hide();

クラスの前にタグを使用

jQueryで2番目に早いセレクタは、タグセレクタ($(’head’))です。
なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName()だからです。
最良の方法は、接頭辞にタグ名(およびIDから派生)を持つクラスです。

var receiveNewsletter = $('#nslForm input.on');

find()を使用

var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6

チェーンメソッドを活用

セレクタをキャッシュするよりも、チェーンのjQueryメソッドをすると良いでしょう

$('#menu-item').click(function () {alert('test click');})
       .css('display', 'block')
       .css('color', 'red')
       .fadeTo(2, 0.7);

jQueryオブジェクトをキャッシュ

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

DOM挿入のいずれかの種類を実行するときに単一の要素のすべてをラップする

var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
menu += '<li>' + i + '</li>';
}
menu += '</ul>';
$('#header').prepend(menu);

// 代わりにこちら:

$('#header').prepend('<ul id="menu"></ul>');
for (var i = 1; i < 100; i++) {
$('#menu').append('<li>' + i + '</li>');
}

live()を使うより、delegate()を使うことでより高速化できる

// 汚い書き方。。
$('a.trigger', $('#container')[0]).live('click', handerFn);

// 良い書き方
$('#container').delegate('click', 'a.trigger', handlerFn);

↑これに関しては後述する.on()で書くのが望ましいです

DOMの操作は総じて重い

タグのスタイル属性を直接操作するのはもってのほか。スタイルをいじりたい場合はクラスを変えよう。(DOMの操作は最小限におさえるのが原則)

特殊なセレクタを排除する

:xxxは専用のメソッドに置換する。
:firstを.first()にするなど。

常に最新版を使おう

jQueryはバージョンアップし続けているので常に最新版を使うことを心がけましょう

jsファイルはまとめよう!

jsはなるべく一つのファイルに

eachよりfor

繰り返しの処理をするときはeachよりforを使いましょう

concat()よりjoin()

文字列を連結するときはconcat()するより、配列に全部いれておいてjoin()した方が速い

はてブで頂いたご指摘

はてブコメで頂いたご指摘をぼくが理解できる範囲でご紹介させて頂きます

liveもdelegateも使うな。今はon使え。

bindもliveもdelegateも1.7からは、onで統一されました。
onは書き方によってliveでもdelegateとしても使えるのですが、
この場合でもdelegateとして使うのが望ましいです。
.delegate()として使う場合は
$('#fuga').on('.hoge','event',callback)
と書きます。#fuga内にある.hogeのeventに対してcallbackします。
.live()としてonを使う場合は
$(document).on('.hoge','event',callback)
とdocumentを指定します。

JavaScriptの高速化テクニック

for内にlengthを使わない(3倍以上早い)

for( i = 0 ; i < array.length ; i++ ){
}
より
for(var i = 0 ,len = array.length; i < len ; i++ ){
}
の方が3倍以上早い

変数名はローカルにする(IE7でかなり有効)

for( ){
array.ddd.aaa.ccc[i].value
}
でアクセスするより
temp = array.ddd.aaa.ccc;
for( ){
temp[i].value
}

innetHTMLよりcreateTextNodeを使う(2倍速い)

一回一回createElementするよりも、
cloneNode( true )でエレメントを複製するほうが高速です。

いちいちcreateElementしない

変な関数は作らない(3倍早い)

temp = function aaa(){}
より
temp = function(){}

1 2





このまとめに参加する



  • 話題の動画をまとめよう