1

私の最新のプロジェクトでは、javascript フレームワーク (jQuery) といくつかのプラグイン (validation、jquery-ui、datepicker、facebox など) を使用して、最新の Web アプリケーションを作成しています。

以前よりもページの読み込みが遅いことがわかりました。いくつかの js プロファイリングの後 (VS2010 に感謝します!)、フレームワーク内の処理に多くの時間がかかるようです。

これで、UI ツールが複雑になればなるほど、より多くの処理が必要になることがわかりました。プロジェクトはまだ大規模な段階ではなく、平均的な機能だと思います。この段階では、うまくスケーリングできないことがわかります。

jQuery の「each」コマンドなどに、かなりの処理時間がかかることに気付きました。

JS フレームワークを使用して余分な遅延を経験した人はいますか? ページのパフォーマンスへの影響を最小限に抑えるにはどうすればよいですか? JS フレームワークを使用した実装に関するベスト プラクティスはありますか?

ありがとう

4

1 に答える 1

3

私の個人的な見解は、フレームワークのメソッドとツールを使用することです。たとえば、セレクターやクロスブラウザーの癖の解決など、意味があり生活を楽にするフレームワークのメソッドとツールを使用し、フレームワークのメソッドを使用する必要がないプレーンな古いバニラ JavaScript を使用します。たとえば、 、単純なループで。

フレームワークを使用するコードを確認して再確認し、可能な限り機能することを確認します。フレームワークをパフォーマンスの低い方法で使用するのは非常に簡単であり、プロファイリングするまでこれを発見できない場合があります:)

通常、フレームワークでは、エントリ ポイント関数を使用してそれらを使用した結果として実行される関数が多数あるため、余分なレイテンシが発生します。

編集：

jQuery の使用に関する一般的なポイント:

1. jQuery オブジェクトを複数回使用する場合は、ローカル変数にキャッシュします。DOM のクエリは比較的コストのかかる操作であるため、必要最小限にとどめる必要があります。関連するセレクターがある場合は、幅広い選択を実行してからfind()、filter() next()、prev()などのメソッドを使用してコレクションをフィルター処理し、別のセレクター関数を使用して取得した関連要素を取得する方法を検討してください。

2.関数内で、オブジェクトを不必要にjQueryオブジェクトにラップしないでください。信頼できるオブジェクト プロパティ値にアクセスするクロス ブラウザーの方法がある場合は、それを使用します。たとえば、テキスト入力 HTMLElement の value プロパティ 

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 });

3. 機能のごく一部しか使用していない場合は、大きなスクリプト ファイルを追加しないようにしてください。ページの読み込み時に、決して使用しないコードの解析と実行に多くの時間が費やされる可能性があります。可能であれば、必要な関連コードのみを抽出します。特にバージョニングに関しては、これが難しい場合があり、常に可能であるとは限らないことを理解していますが、それでも指摘する価値はあります。

于 2010-06-08T22:26:18.393 に答える