jsPerf testに 2 つのテストを追加しました。どちらも を使用previousElementSiblingしていますが、2 番目には IE8 以前の互換性コードが含まれています。
どちらも最新のブラウザー(現在使用されているほとんどのブラウザー)では非常に優れたパフォーマンスを発揮しますが、古いブラウザーでは多少の影響があります。
これは、互換性修正プログラムが含まれていない最初のものです。Firefox、Chrome、Safari のほぼすべてと同様に、IE9 以降で動作します。
function findRow6(node) {
var i = 1;
while (node = node.previousElementSibling)
++i;
return i;
}
互換性修正が適用されたバージョンは次のとおりです。
function findRow7(node) {
var i = 1,
prev;
while (true)
if (prev = node.previousElementSibling) {
node = prev;
++i;
} else if (node = node.previousSibling) {
if (node.nodeType === 1) {
++i;
}
} else break;
return i;
}
要素の兄弟を自動的に取得するため、 for のテストは不要でnodeType、全体的にループが短くなります。これにより、パフォーマンスが大幅に向上します。
また、 をループし.children、 をそれぞれと比較する最後のバージョンを 1 つ追加しましnodeた。
これはバージョンほど高速ではありませんpreviousElementSiblingが、それでも他のバージョンよりも高速です(少なくとも Firefox では)。
function findRow8(node) {
var children = node.parentNode.children,
i = 0,
len = children.length;
for( ; i < len && children[i] !== node; i++)
; // <-- empty statement
return i === len ? -1 : i;
}
バージョンに戻るとpreviousElementSibling、パフォーマンスがわずかに向上する可能性のある微調整があります。
function findRow9(node) {
var i = 1,
prev = node.previousElementSibling;
if (prev) {
do ++i;
while (prev = prev.previousElementSibling);
} else {
while (node = node.previousSibling) {
if (node.nodeType === 1) {
++i;
}
}
}
return i;
}
私は jsPerf でテストしていませんが、 a の存在に基づいて 2 つの異なるループに分割すると、previouselementSibling私が考えるのに役立つだけです。
多分私はそれを少し追加します。
私は先に進み、この回答の上部にリンクされているテストに追加しました。少しは効果があるので、やってみる価値はあると思います。