DocumentFragmentを使ってAutoPageLoaderを高速化

AutoPageLoaderのコードを大幅に変えた。

1. $Xを使った。
2. ページの継ぎ足しにDocumentFragmentを経由するようにした
3. 他のスクリプトがページの構造を変えたときに、正常にpageElementを取得できなかったバグを修正した

DocumentFragmentについては、http://purl.org/jintrick/Personal/documentFragment.htmlの記事を参考にした。

DocumentFragmentはE4Xの<>のようなもので、appendChildするだけでいっぺんに複数のノードを貼り付けることが出来る。直接appendChildを繰り返すよりも軽くなる。

たとえば、全てのリンクをテキストにする場合。
普通にやると、

var links = document.body.getElementsByTagName('a');

while(links.length)
  links[0].parentNode.replaceChild(document.createTextNode(links[0].textContent),
                                   links[0]);

で、127msかかるけど、
DocumentFragmentを使う場合は、

var df = document.createDocumentFragment();
df.appendChild(document.body);
var links = df.firstChild.getElementsByTagName('a');
while(links.length)
  links[0].parentNode.replaceChild(document.createTextNode(links[0].textContent),
                                   links[0]);
document.documentElement.appendChild(df);

34msしかかからない。