パフォーマンス

getElementByIdは重いのか

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

	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の変更は重いのか

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

	IE8	Firefox3.6	Chrome8	Safari5	IOS4
毎回変更	247ms	252ms	31ms	28ms	697ms
まとめて変更	24ms	28ms	31ms	28ms	660ms

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

lengthは重いのか

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

	IE8	Firefox3.6	Chrome8	Safari5	IOS4
毎回取得	125ms	22ms	2ms	4ms	190ms
最初に取得	80ms	24ms	2ms	4ms	210ms

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

	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

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

PC

ダウンロード

開発環境

リンク集

おすすめフリーソフト

CentOS Server

Raspberry Pi

Ubuntu Server

WEB

DokuWiki

iPhone

iPhoneサンプル

電子工作

個人的なメモ

パフォーマンス

getElementByIdは重いのか

htmlの変更は重いのか

lengthは重いのか

連想配列は重いのか