前回同様、O’REILLYの「JavaScriptグラフィックス」１章効率化についてメモ。
キモは
- 「要素が見つかったら極力再検索しない」
- 「要素の追加は、文字列で一括して行う」
１．要素の検索について
$('#elem1').css('color' , '#ff0000');//赤
$('#elem1').css('color' , '#00FF00');//緑
$('#elem1').css('color' , '#0000FF');//青
$('#elem1').css('left' , '100px');//x座標を動かす
このサンプルではelem1を毎回検索しているので、効率が悪い。
そこで検索結果を変数に保存する。
$alien=$('#elem1');
となる。
※ここまでは想像していたのだが、この章の説明は検索範囲の指定まで踏み込んでいる。
曰く「jQueryが検索する要素の範囲を指定したほうが速い」。
$alien=$(‘#element1′ , container);//特定のDOM要素から検索する
個人的にはあまり使わないような気がするが一応覚えておく。
まだjQueryのcss()関数が残っている。これも変数に格納。
var elemStyle=$('#elem1')[0].style;
そしてcssスタイルを設定する。
elemStyle.color='#ff0000'; elemStyle.color='#00ff00'; elemStyle.color='#0000ff'; elemStyle.left='100px';
(なぜかelemStyle.colorをアラート表示できない）
２．要素の追加は文字列で一括して行う
DOMへの要素挿入は遅いので、
文字列+=追加文字列
で文字列を作成し、
$elem.append(文字列);
で一気に追加する。
これらを踏まえたサンプル。
http://nouv.biz/labo/20120908_jQuery_speed/ex0100_css.html
css操作はcssが設定されていないと動作しないので注意。コードは以下のとおり。
[html]
＜ｄｉｖ ｉｄ＝”ｅｌｅｍｅｎｔ１”＞＜ｄｉｖ＞
[css]
#element1{
position:absolute;
left:0;
top:0;
font-size:80px;
color: #000000;
}
[JavaScript]
var $elem;//jQueryから取得
var elemStyle;//取得した要素のスタイル
var divs='';//追加する要素
//検索し、変数に格納 idを取得しているのに、配列のようなものになるらしい
$elem=$('#element1');
//$elem[0].addEventListener("click" , onClicked , false);
AddEvent.addEvent($elem[0] , "click" , onClicked);//オリジナルクラス
//変数からstyleを格納
//var elemStyle=$elem.style;
//Debugger.log(elemStyle);//undefinedになる
var elemStyle=$elem[0].style;//なぜか添字０をつけなければならない。
Debugger.log(elemStyle);
//makeDivs
//makeDivs
for(var i=0 ; i divs+=''//文字列追加省略
}
function onClicked(event){
Debugger.log("clicked");
elemStyle.color="#ff0000";
elemStyle.left="50px";
elemStyle.top="50px";
$elem.append(divs);
}
