Javascriptの高速化

こちらも今更ですが、WEB + DB Press Vol.35 を読んだメモ。
今日、jQueryとかのライブラリの躍進が目覚ましいので、それほどイベントハンドラをごちゃごちゃ書く機会もなくなっているのかなーとも思いますので、使いそうなところのみ。
(というか自分の能力がしょぼいから書く必要性を感じていないということかも...orz)

DOMへのアクセスを少なくする

DOMへのアクセスをできるだけ少なくする = できるだけ.(ドット)を使わないようにする

.(ドット)へのアクセス回数を減らす

var nameList = document.getElementById('name');
nameList.style.height = '100px';
nameList.style.weight = '100px';
nameList.style.top = '100px';

↓↓↓

var nameList = document.getElementById('name');
var style = nameList.style;
style.height = '100px';
style.weight = '100px';
style.top = '100px';

上に同じく。forでlengthを使うとき

var nameList = document.getElementById('name');
for (var i = 0; i < nameList.length; i++) {
    // 繰り返し処理
}

↓↓↓

var nameList = document.getElementById('name');
for (var i = 0, var len = nameList.length; i < len; i++) {
    // 繰り返し処理
}

innerHTMLはコストが高いので、できるだけ参照しない

var nameList = document.getElementById('name');
name.innerHTML += '<div>\n';
name.innerHTML += 'div要素が追加されます.\n';
name.innerHTML += '</div>\n'

↓↓↓

var nameList = document.getElementById('name');
var html = nameList.innerHTML;
html += '<div>\n';
html += 'div要素が追加されます.\n';
html += '</div>\n'
nameList.innerHTML = html;