セレクタの高速化をjavascriptで考える

jqueryは、javascriptでやっていることをより簡単なプラグラムでできるようにしてくれています。
そのため、ちょっとした書き方の違いで裏でやっている作業が違います。

高速化するためには
1、セレクタで同じものを選ぶ時は変数に代入
２、classだけのセレクタは使わず要素を前に書く(IE対策)
３、#id要素を極力使う
などがあります。※jqueryのセレクタスピード比較

スピードを早くするための書き方をjqueryとjavascriptを比較して考えてみます。

要素で選ぶとき

div要素のフォントの色を赤く変更します。

jquery

$(function(){
$('div').css('color','#f00');
});

javascript

window.onload = function(){
　　　var elements = document.getElementsByTagName('div');
　　　for(var i = 0, L=elements.length; i<L; i++){
　　　　　elements[i].style.color = '#f00';
　　　}
}

window.onload
ページが全部読み込まれたときにfunction()以下を実行する

var elements = document.getElementsByTagName(‘div’)
ページ内の全てのdivの要素をelementsに配列として代入

for(var i = 0, L=elements.length; i<L; i++)
for文を使って、配列それぞれに対して実行させます

elements[i].style.color = ‘#f00’;
それぞれのdiv要素のフォントの色を赤に変更します。

セレクタで選ぶだけでこの作業を行っているので、セレクタで同じものを選ぶ時は変数に代入することが大切です。

1、セレクタで同じものを選ぶ時は変数に代入

var div = $('div');
div.css('color','#f00');

クラスで選ぶとき

.redのクラスがある要素のフォントの色を赤く変更します。
jquery

$(function(){
$('.red').css('color', '#f00');
});

javascript

window.onload = function(){
var elements = document.getElementsByTagName('*');
for(var i=0, L=elements.length; i<L; i++){
	var classes = elements[i].className.split(' ');
	if(classes.indexOf('red') != -1){
	    elements[i].style.color = '#f00';
	}
}
}

window.onload
ページが全部読み込まれたときにfunction()以下を実行する

var elements = document.getElementsByTagName(‘*’);
ページ内の全ての要素をelementsに配列として代入

for(var i = 0, L=elements.length; i<L; i++)
for文を使って、配列それぞれに対して実行させます

var classes = elements[i].className.split(‘ ‘);
splitで空白で区切ったclassの値をclassesに代入

indexOf(‘?’)
左から右に検索して?と同じ文字列がその先頭から数えての?番目の？の数字を返します。無いときは-1

if(classes.indexOf(‘red’) != -1)
redがあるときだけに実行します。

elements[i].style.color = ‘#f00’;
それぞれのdiv要素のフォントの色を価格変更します。

クラスだけで選ぶと全ての要素から調べるので、スピードが遅くなります。
※getElementsByClassNameがIEで未対応のため、IEで遅くなります。
他のプラウザではそこまで遅くなりません。IE9からは対応されて、今より断然、早くなります。

クラスの前に要素をつけて選ぶとき

.redのクラスがある要素のフォントの色を赤く変更します。
jquery

$(function(){
$('span .red').css('color', '#f00');
});

javascript

window.onload = function(){
var elements = document.getElementsByTagName('span');
for(var i=0, L=elements.length; i<L; i++){
	var classes = elements[i].className.split(' ');
	if(classes.indexOf('span’) != -1){
	    elements[i].style.color = '#f00';
	}
}
}

window.onload
ページが全部読み込まれたときにfunction()以下を実行する

var elements = document.getElementsByTagName(‘span’);
ページ内の全てのspan要素をelementsに配列として代入

for(var i = 0, L=elements.length; i<L; i++)
for文を使って、配列それぞれに対して実行させます

var classes = elements[i].className.split(‘ ‘);
splitで空白で区切ったclassの値をclassesに代入

indexOf(‘?’)
左から右に検索して?と同じ文字列がその先頭から数えての?番目の？の数字を返します。無いときは-1

if(classes.indexOf(‘red’) != -1)
headerがあるときだけに実行します。

elements[i].style.color = ‘#f00’;
それぞれのdiv要素のフォントの色を赤に変更します。

要素を前につけてあげるだけで、spanからだけ調べるようになるので、早くなります。
２、classだけのセレクタは使わず要素を前に書く

$(function(){
$('span .red').css('color', '#f00');
});

id要素で行うとき

redのidがある要素のフォントの色を赤く変更します。
jquery

$(function(){
$('#red').css('color', '#f00');
});

javascript

window.onload = function (){
document.getElementById('red').style.color ='#f00';
}

document.getElementById(‘red’)
id=redの要素を選びます
要素を選ぶときとidで選ぶときは、使えるメソッドが違うので簡単にかけます。

極力、セレクタはid属性で書いてあげることでスピードが速くいろいろな処理を行いやすいのです。
３、#id要素を極力使う

$(function(){
$('#red').css('color', '#f00');
});