document.head使うと 使うはどう違いdocument.getElementsByTagName("head")[0]ますか？私が実行したテストでは、どちらも約 1 ミリ秒かかることが示されました。
私も見ました
document.head||document.getElementsByTagName("head")[0];
私が行ったテストがこれを反証したことを除いて、document.headそれは私がより速く、他の方がより互換性があると私に信じさせたでしょう。
そして、一方がより互換性がある場合、なぜ他方も使用するのでしょうか?
更新:一部の人が指摘しているように、私のテストは間違っていました。
||このように演算子を使用することは、特徴検出の一種です。使用すると、最初の値が定義されていない場合、後者の値が返されます。
だから
document.head || document.getElementsByTagName("head")[0];
その理由は、document.headがサポートされていない場合、少なくとも正しい値が返されるためです。
速度テストに関しては、ミリ秒は長い時間です。本当にそんなに時間がかかったとは思えません。実際、私はこれのjsPerfために を作りました。これは、getElementsByTagName関数が約 80% 遅いことを示しています。
MDNによるとdocument.head、IE 9 でしかサポートされていないため、他の方法をフォールバックとして使用すると、ブラウザの非互換性から保護されます
これは、パフォーマンスの問題というよりも利便性の問題です (ただしdocument.head、メリットはほとんどありません)。好きな方を使用するか、一方を他方へのフォールバックとして使用します (例のコードのように)。document.headIE 6-8 ではサポートされていないため、フォールバックを使用することは賢明です。
すぐに非推奨になる可能性は低いgetElementsByTagNameため、これはフォールバックを提供するのが良い例ではありません。より詳細なルートを単独で安全に使用して、将来のサポートを楽しむことができます.
これらのタイプのより良い例は、イベントであり、古いブラウザーと比較して、最新のブラウザーでイベントがどのように渡されるかです。次のようなものを目にすることは珍しくありません。
function callback (event) {
var id = (event || window.event).target.id;
}
ただし、この場合、そのwindow.event部分はレガシー サポートに必要です。eventオブジェクトがの場合undefined、イベントはwindowオブジェクトのメンバーであると見なされます。ブラウザが成熟するにつれて、それはもはや重要でwindow.eventはなくなり、代わりにこれらのテストが全会一致で戻ってきevent.target.idます。
繰り返しますが、あなたのケースは少し異なります.getElementsByTagNameおそらく廃止されたり消えたりすることはないでしょうwindow.event.
1ページに1つしかないはずなので、便利です。への直接のショートカットがあるのと同じようにdocument.body、これdocument.bodyは標準であり、フォールバックは必要ありません。
document.body || document.getElementsByTagName("body")[0]
document.headIE9+ のみをサポートしている場合を除き、私は使用しません。それまでは、私は固執しますdocument.getElementsByTagName("head")[0]
時間が経っても変更する必要のないバージョンが必要な場合は、スクリプトの上部で次のことを行うことができます
document.head = document.head || document.getElementsByTagName("head")[0];
そうすれば、IE8 のサポートを終了するときに、その 1 つの場所を変更するだけで済みます (または、害はないのでそのままにしておくこともできますが、デッド コードになる可能性があります)。上記のコードは、DOM を 1 回だけクエリするようにもします。