jQuery（document）.ready（function（$）

Question

jQueryスクリプトを作成しました。（文書）.ready（function（$））関数を使用しました ウェブサイトを遅くしますか？あなたは私のサイトを落とすことなく、このような関数を作成する方法を示してくださいすることができますよりも？ はどうもありがとうございました！

<script> 
jQuery(document).ready(function($){ 
    $('#columns').wrapInner('<div id="columnsInner" />'); 
    $("div.productInfo:first").wrap("<div id='productDetails' />"); 
}); 
</script> 

Answer 1

単にreadyを使用すると、パフォーマンスが大幅に影響を与えることはありません。もっと大きな問題は、あなたが使用しているセレクタです。例えば、 "div.productInfo：first"は現代のブラウザではquerySelectorで問題ありません。しかし、古いブラウザではdivまでループする必要がありますそれは一致を見つける。そのdivがidを持っていれば、それを避けることができます。私は必ずしもそれを主張しているわけではない。それは単なる一般的な考察です。

EDIT：実は、私はそれを指摘するのでjQueryのは、querySelector（すべて）を活用していないと考えている。

ので：まず、jQueryの延長ではなくCSS 仕様の一部であるクエリを使用して：最初にすることはできませんネイティブDOM querySelectorAll（） メソッドによって提供された パフォーマンスの向上を利用してください。最初 の要素を選択するために、最初の純粋なCSSセレクタ、そして 使用.filter（「：最初の」）を使用して要素を選択：「

をそうしても、新しいブラウザのため、それを使用するときに最高のパフォーマンスを達成するために。使用する方がよいでしょう：あなたはjQueryの `にそれを減らすことができます

$("div.productInfo").filter(":first") 

jQueryのはまだ古いブラウザでのdiv要素をループする必要があります