3

スクリプトを使用して、その機能をまだサポートしていないブラウザーでプレースホルダーを持つすべての入力を作成しています。

私が使用しているそのスクリプトで

$('input[placeholder]').each(function() {

操作するすべての要素を選択します。

のような非常に具体的な選択ではないので、それが遅くなるのではないかと思っていました

$('#input').each(function() {

私が知っている方法は、はるかに高速に選択されます（ただし、すべてのIDを個別に指定したくありません）。

次のように、プレースホルダー属性を使用してすべての入力にクラスを追加することをお勧めしますか?

$('.iHaveaPlaceholder').each(function() {

選択を高速化します（属性による選択よりもクラスによる選択の方が速いと思います）。しかし、これはCSSクラスの目的を誤用し、スタイリングのみを意味し、DOMを埋めてしまいます。

このようなタスクを改善するための提案やテクニックはありますか?

4

4 に答える 4

3

先に進み、セレクターを比較するためのJSPerfを作成しました。 input[placeholder].hasPlaceholderinput.filter()

考えるべき数字がいくつかあるので、なぜ知りたいのかについて話しましょう。

この検索を行うのは'input[placeholder]'いつですか? 願わくば一度だけ。最新のブラウザーでこれらのセレクターのいずれかを実行すると、かなり高速になります (数値は 1 秒あたりの操作数です....)。ただし、プレースホルダーをサポートしていないブラウザーでのみこのセレクターを実行していることがわかっている場合は、リストされている 3 つの方法のうち、.hasPlacehoder実際には IE 6 で最も遅く、カスタム フィルターが優先されます。このコードが実際に影響を与えるブラウザーでパフォーマンスをテストしたいと考えています。

自由に独自のセレクターを追加するか、そのページに正確な HTML に近づけて、ブラウザーのテストを依頼してください。

編集：新しいパフォーマンスでレースに追加input.hasPlaceholderしました...

于 2011-02-23T00:46:48.803 に答える
2

大規模な DOM を使用していない限り、パフォーマンスの違いが実際に影響することはないと思います。あなたが言ったように、「最適化」の目的で多くのクラスを設定すると、ドキュメントの論理構造が混乱します。

コンテキストを提供せずにクラスごとに選択すると、DOM 全体が走査されます。要素による選択についても同じことが言えます。ここでプレースホルダー クラスを使用することは、間違いなく答えではありません。あなたがしたいことは、特定の属性を持つすべての入力要素を見つけることです-そして、その目的のために正しいセレクターを使用しています。

于 2011-02-22T22:22:13.003 に答える
0

フォームに id を与えてから$("#theForm input[placeholder]")which を使用すると、セレクターが考慮しなければならない要素の数を減らすことができます。

于 2011-02-22T22:18:47.250 に答える
0

遅くはありません（テストしたか、推測しただけですか？）。しかし、そうであればクラスを使用してください。

于 2011-02-22T22:22:07.017 に答える