document.links と document.getElementsByTagName('a')
document.links は area 要素も取ってこれるのと、結果が HTMLCollection なので namedItem メソッドが使えることの違いでいいのかな?
document.links して namedItem するぐらいなら getElementById でいいじゃん。(name 属性は考えないとして)
疑問終了。
以下メモ。
JavaScript で1万件のデータを検索する実験
opera:cache 検索を高速化するべくいろいろ遊んでみた。
下で紹介した JavaScript では document.links を使ってたので、どうしてかなーと思って。(と言ってもちゃんと読んでないけど)
自分の opera:cache (履歴10288ファイル) を開いて、以下のブックマークレットをそれぞれ実行。
10288件のアンカー要素を取得
1.1) document.links 方式
javascript:(function(){var a0=new Date().getTime();var b=document.links,c=[];for(var i=0,n=b.length;i<n;i++)c[i]=b[i];var a1=new Date().getTime();alert(a1-a0);})();
結果: 22-25ms
1.2) document.getElementsByTagName('a') 方式
javascript:(function(){var a0=new Date().getTime();var b=document.getElementsByTagName('a'),c=[];for(var i=0,n=b.length;i<n;i++)c[i]=b[i];var a1=new Date().getTime();alert(a1-a0);})();
結果: 38-40ms
1.3) XPath 方式
javascript:(function(){var a0=new Date().getTime();var b=document.evaluate('//a',document,null,7,null),c=[];for(var i=0,n=b.snapshotLength;i<n;i++)c[i]=b.snapshotItem(i);var a1=new Date().getTime();alert(a1-a0);})();
結果: 38-44ms
document.links 方式が一番速い。
"youtube"を含むリンク108件を抽出
2.1) document.links 方式
javascript:(function(){var a0=new Date().getTime();var b=document.links,c=[];for(var i=0,n=b.length;i<n;i++){b[i].href.indexOf('youtube')!=-1 && (c[c.length]=b[i])};var a1=new Date().getTime();alert(a1-a0);})();
結果: 65-79ms (たまに 280ms ぐらい)
2.2) document.getElementsByTagName('a') 方式
javascript:(function(){var a0=new Date().getTime();var b=document.getElementsByTagName('a'),c=[];for(var i=0,n=b.length;i<n;i++){b[i].href.indexOf('youtube')!=-1 && (c[c.length]=b[i])};var a1=new Date().getTime();alert(a1-a0);})();
結果: 79-87ms (たまに 286ms ぐらい)
2.3) XPath 方式
javascript:(function(){var a0=new Date().getTime();var b=document.evaluate('//a[contains(@href,"youtube")]',document,null,7,null),c=[];for(var i=0,n=b.snapshotLength;i<n;i++)c[i]=b.snapshotItem(i);var a1=new Date().getTime();alert(a1-a0);})();
結果: 37-40ms
しかし大文字・小文字の違いを許容するなら正規表現を使わないといけないので XPath 方式では無理かも。
不思議なのが、2.1と2.2で、実行速度に2系列あったこと。どちらもたまに (4回に1回ぐらい) 280ms あたりの結果が出た。どこで引っかかってるんだろう?
次はこれをどう描写するかだな。
documentFragment を使って1回の描写でやるのがいいと思うのだけど、それで時間がかかりすぎるなら上のほうから先に描写を開始するほうが体感的には速そうだし、インクリメンタルで検索するとしたら、全体を再度検索するよりも前の結果をキャッシュしたほうがいいな。前の結果の描写が終わらないうちに次の文字が入力されたときのことも考えないと。
