2010年3月26日 #jquery

DOM操作を避けてjQueryのパフォーマンスを改善する掟です。
こんなコードがあるとしましょう。

パフォーマンスの悪い例

var list = *....*;    // 長さ100の配列とする

for (var i in list) {

    var li = document.createElement("li");

    $(li)
       .attr("id", "li" + i)
       .text(list*i*);

$("ul").append(li);

}

改善したコード

var list = *....*;    // 長さ100の配列とする

var li = "";
for (var i in list) {

    li += "<li id='li" + i "'>" + list*i* + "</li>";

}

$("ul").html(li);

まとめ

  • document.createElementの代わりにHTMLの文字列を作る
  • jQueryオブジェクトに属性やテキストを設定するのではなく、直接HTML文字列に書く
  • for文内毎回appendの代わりにhtml()を使う

実際のプロジェクトでやってみたら10倍以上は速くなりました。
とは言ってもこれはIE6でのパフォーマンスで、
FirefoxやIE8だと悪い例のコードても遅いとは実感できないくらいでした。

ちなみに
$(li).attr(...).val(...).text(...)の方は読みやすいので結構気に入ったんですけど。。。

2010年3月10日 #jquery

jQuery 1.4.2ではこれは治ったようです。
jQuery最新版をお使いの方は下記のようなバグはもう発生しません。

サンプル

※jQuery 1.3.2で発生する問題※

HTML

<select>
    <option id="foo">&nbsp;</option>
    <option>11</option>
    <option>22</option>
</select>

<tr id="bar">&nbsp;</tr>

Javascript

var optionText = $("#foo").text();

// firefoxは0、IEは1
alert("select optionタグの をtrimした後のlength: " + $.trim(optionText).length);

var trText = $("#bar").text();

// firefoxは0、IEも0!
alert("trタグの をtrimした後のlength: " + $.trim(trText).length);

結果

selectのoptionタグのテキストにある"&nbsp;"
$.trimをかけて見ると
Firefoxはちゃんとtrimしてlengthが0になったが、
IEはtrimできずlengthが1のままです。

しかしtrタグのテキストにある"&nbsp;"をtrimすると
IEも正しくtrimしてlengthが0になるんです。。。

DEMO

jQuery最新版(1.4.2)を使うDEMO

2010年3月 8日 #javascript

今まで全然気付かなかったんです、
JavascriptのArrayにはdeleteみたいなAPIがないことに。
配列の要素をindex指定で削除したい場合は代わりにsplice関数を使います。

splice関数

とほほからのレファレンスでは

array.splice(start, n, e1, e2, ...) (N4)
0 から数えて、start 番目から n 個の要素を削除し、その代わりに e1, e2, ...を値とする要素を埋め込みます。戻り値は JavaScript のバージョンによって異なります。

var xx = new Array("A", "B", "C", "D", "E", "F", "G");
xx.splice(2, 3, "c", "d", "e");   // "C", "D", "E" が小文字になります

indexで配列の要素を削除するには

myArray.splice(index, 1);

indexは削除する要素のindex、1はこの一つだけを削除する意味で
他のパラメータはいらないです。
またsplice後は配列そのものが変更されます。

2010年3月 3日 #jquery

こんなHTMLがあるとします。
idに**が付いてますね。

<input id="foo0" type="text" />
<input id="foo1" type="text" />
<input id="foo2" type="text" />

こういうIDに括弧が付いたモノに対して
普通の#付きのjQueryセレクタでは選択できません。

$("#foo0");    // 取れません

属性フィルタattribute=valueでとるのが正解です。

$("id='foo[0]'");

0311更新:
もし具体的なタグがわかってあれば、
それを指定することでパフォーマンスを向上できます。
上記の例で言うと

$("inputid='foo[0]'");

このほうが速いです。

2010年3月 2日 #chrome

すべての言語でAutomatic Translationを無効にしたい人のために。

  • C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\User Data\Defaultへアクセスします。 -WinXPはC:\Documents and Settings\(ユーザ名)\Local Settings\Application Data\Google\Chrome\User Data\Default
  • 「Preferences」ってファイルがあります。

  • 「translate」で検索すると、最後あたりでこのような文字列があるはずです。

  • translate_language_blacklistを、以下コードに書き換える。

"translate_language_blacklist": * "en", "de", "zh-TW", "it", "af", "sq", "ar", "be", "bg", "ca", "zh-CN", "hr", "cs", "da", "nl", "et", "tl", "fi", "fr", "gl", "el", "he", "hi", "hu", "is", "ja", "ko", "lv", "lt", "mk", "ms", "mt", "no", "fa", "pl", "pt", "ro", "ru", "sr", "sk", "sl", "es", "sw", "sv", "th", "tr", "uk", "vi", "cy", "yi" *,

  • 修正完了
2010年3月 2日 #javascript

スクロールバーを最下部に移動するJavascriptです。

普通のJavascriptで書くと

function goBottom(targetId) {
    var obj = document.getElementById(targetId);
    if(!obj) return;
    obj.scrollTop = obj.scrollHeight;
}

完全にjQueryで書くとこんな感じ

function goBottom(targetId) {
  var target = $("#" + targetId);
  $(window).scrollTop(target.offset().top);
}

これ以外はhiddenのinput項目を最下部に置いといて、
それをfocusするような技もありけど、、

2010年2月22日 #javascript

面白いかと思ったのでメモしときます。

普通の書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0; i < rows.length; i++ ) {

   rows*i*.className = 'newclass';

   rows*i*.style.color = 'red';
  ...
}

効率のいい書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0, row; row = rows*i*; i++ ) {

    row.className = 'newclass';

    row.style.color = 'red';
    ...
}

参考サイト:http://www.javaeye.com/topic/455376

2010年2月17日 #java

基本

多分ほとんどの人は分かっていると思いますが、
jspファイル内のコメントの記述は以下になります。

<%-- JSPのコメント --%>

そしてHTMLのコメントの記述は

<!-- HTMLのコメント -->

問題

SP内でもHTMLのコメント記述が使えますが、
コメントアウトした部分にJavaプログラムが埋め込んだ場合
そのコードは実はコンパイルされてしまいます。
例えば、

<!-- コメントアウト
<input type="text" value="<%= request.getNotExistMethod() %>" />
 -->

ここでは全く存在しないJavaのメソッドを書きました。
このままだとJSPがコンパイルエラーになります。
"The method getNotExistMethod() is undefined for the type HttpServletRequest"というメッセージです。

正しい方法

Javaプログラムが埋め込んだコードをコメントアウトするには
JSPのコメント式を記述します。
上記の例で言うとこうなります。

<%-- JSPコメントアウト
<input type="text" value="<%= request.getNotExistMethod() %>" />
-%>

補足

下記のようなコンパイルが通るJavaコードが書かれた場合は、
もちろんエラーは出ないし、 HTMLの部分もコメントアウトされたため画面には何も表示されません。

<!-- コメントアウト
<input type="text" value="<%= request.getContextPath() %>" />
->