====== パフォーマンス ======
===== getElementByIdは重いのか =====
<sxh javascript; toolbar:false>
// 毎回を呼び出し
for(var i = 0 ; i < 100000 ; ++ i) {
    document.getElementById("test_01_0").style.color = "#fff" ;
}

// 最初のみ呼び出し１
var g = document.getElementById("test_01_1") ;
for(var i = 0 ; i < 100000 ; ++ i) {
    g.style.color = "#fff" ;
}

// 最初のみ呼び出し２
var s = document.getElementById("test_01_2").style ;
for(var i = 0 ; i < 100000 ; ++ i) {
    s.color = "#fff" ;
}
</sxh>
^                ^  IE8  ^  Firefox3.6  ^  Chrome8  ^Safari5  ^  IOS4  ^
^毎回呼び出し      |  571ms|  245ms|  204ms|  190ms|  520ms|
^最初のみ呼び出し１|  211ms|  135ms|  185ms|  165ms|  418ms|
^最初のみ呼び出し２|   73ms|   89ms|  183ms|  159ms|  355ms|
IOS4のループ回数は1/10。\\ 
とにかく検索を伴う呼び出し回数は減らすべき。

===== htmlの変更は重いのか =====
<sxh javascript; toolbar:false>
// 毎回変更
var s1 = document.getElementById("test_02_0").style ;
for(var i = 0 ; i < 5000 ; ++ i) {
    s1.color = "#f00" ;
    s1.top   = i + "px" ;
    s1.left  = i + "px" ;
}

// まとめて変更
var orgin = document.getElementById("test_02_1") ;
var clone = orgin.cloneNode(false) ;
var s2 = clone.style ;
for(var i = 0 ; i < 5000 ; ++ i) {
    s2.color = "#0f0" ;
    s2.top   = i + "px" ;
    s2.left  = i + "px" ;
}
orgin.parentNode.replaceChild(clone,orgin) ;
</sxh>
^            ^  IE8  ^  Firefox3.6  ^  Chrome8  ^  Safari5  ^  IOS4  ^
^毎回変更    |  247ms|  252ms|  31ms|  28ms|  697ms|
^まとめて変更|   24ms|   28ms|  31ms|  28ms|  660ms|
IOSを含むSafariは内部で最適化されている。それ以外は更新をまとめて１回にしたほうが良い。

===== lengthは重いのか =====
<sxh javascript; toolbar:false>
var table = [] ;
for(var i = 0 ; i < 1000000 ; ++ i) table.push(i) ;

// 毎回取得
for(var i = 0 ; i < table.length ; ++ i) {
}

// 最初に取得
len = table.length ;
for(var i = 0 ; i < len ; ++ i) {
}
</sxh>

^          ^  IE8  ^  Firefox3.6  ^  Chrome8  ^  Safari5  ^  IOS4  ^
^毎回取得  |  125ms|  22ms|  2ms|  4ms|  190ms|
^最初に取得|   80ms|  24ms|  2ms|  4ms|  210ms|
IOSを含むSafariは内部で最適化されている。それ以外は更新をまとめて１回にしたほうが良い。

===== 連想配列は重いのか =====
<sxh javascript; toolbar:false>
test_04_sub0 = function(x,y,z,w,h) {
    return x + y + z + w + h ;
}

test_04_sub1 = function(param) {
    return param.x + param.y + param.z + param.w + param.h ;
}

// 普通の変数(設定)
var x,y,z,w,h ;
for(var i = 0 ; i < 100000 ; ++ i) {
    x = i ;
    y = i ;
    z = i ;
    w = i ;
    h = i ;
}

// 連想配列(設定)
var param ;
for(var i = 0 ; i < 100000 ; ++ i) {
    param = {"x":0,"y":1,"z":2,"w":3,"h":4} ;
}

// 普通の変数(参照)
for(var i = 0 ; i < 100000 ; ++ i) {
    test_04_sub0(x,y,z,w,h) ;
}

// 連想配列(参照)
for(var i = 0 ; i < 100000 ; ++ i) {
    test_04_sub1(param) ;
}
</sxh>

^          ^  IE8  ^  Firefox3.6  ^  Chrome8  ^  Safari5  ^  IOS4  ^
^普通の変数(設定)|   13ms|   8ms|  1ms|  1ms|   32ms|
^連想配列(設定)  |  125ms|  33ms|  2ms|  8ms|  203ms|
^普通の変数(参照)|   40ms|  29ms|  1ms|  1ms|  178ms|
^連想配列(参照)  |   67ms|  32ms|  2ms|  2ms|  182ms|
連想配列の設定は重いが、参照はそれほどでもない。