2007/08/31
Ajax 最適化 Tips - getElementById する前に
getElementById で要素を手っ取り早く取得するのはとても良いイディオムですが(コードが短かくなる)、パフォーマンスのことを心配する場合は以下のことを念頭に入れておくと良いかもしれません。
Microsoft の DHTML Collections(*) によると、
(*) http://msdn2.microsoft.com/en-us/library/ms533048.aspx
document 以下の特定の種類の要素をフラットにアクセスできるコレクションという形で提供しています。通常ノードツリーをトラバースするよりコレクションにアクセスするほうが速いので、これを使わない手はありません。特に便利だと思われるのは以下のようなものでしょうか(他にも便利なものがありますが、今回は document に対してのコレクションのみに限定したいので省きました)。
- document.anchors
- document.forms
仮に以下のような HTML があるとします。
<a id="button1">Click me!</a> <form id="form1"> ... </form>
この場合、
document.getElementById('button1').innerHTML = 'Do not click me!'; document.getElementById('form1').onsubmit = function() { alert('Submit!') };
と書くより、
document.anchors['button1'].innerHTML = 'Do not click me!'; document.forms['form1'].onsubmit = function() { alert('Sumit!') };
と書くほうが格段に速いです。ただコレクションのインデックスは整数値あるいは id/name を受けつける寛大な仕様になっているので、もう少し厳密にするなら以下のように書くと良いかもしれません。
function getElementByIdWithHint(id, expectedTagName) { expectedTagName = (expectedTagName || '').toLowerCase(); var collection; if (expectedTagName == 'a') collection = document.anchors; else if (expectedTagName == 'form') collection = document.forms; if (collection) { for (var i = 0, len = collection.length; i < len; i++) { var elem = collection[i]; if (elem.id == id) return elem; } return null; } else return document.getElementById(id); } getElementByIdWithHint('button1', 'a').innerHTML = 'Do not click me!'; getElementByIdWithHint('form1', 'form').onsubmit = function() { alert('Sumit!') };
言うまでもありませんが、 getElementById を使わないにこしたことはありません。ほとんどの場合はうまくキャッシュさせたり、もっとオーダーの低い firstChild なりを使って何とかなったりします。その辺りのこともいずれ話したいと思います。
- Category(s)
- javascript
- performance tuning
- The URL to Trackback this entry is:
- http://dev.ariel-networks.com/Members/matsuyama/before-getElementById/tbping