パフォーマンス

// 毎回を呼び出し
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" ;
}

IOS4のループ回数は1/10。
とにかく検索を伴う呼び出し回数は減らすべき。

// 毎回変更
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) ;

IOSを含むSafariは内部で最適化されている。それ以外は更新をまとめて１回にしたほうが良い。

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) {
}

IOSを含むSafariは内部で最適化されている。それ以外は更新をまとめて１回にしたほうが良い。

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) ;
}

連想配列の設定は重いが、参照はそれほどでもない。