1

内部アプリにはいくつかの厄介な回避策があり、どのjQuery / css手法がより高速/より効率的であると考えられているのか疑問に思っていました...など.

.css を使用する手法 A

$( "#doc" ).css( "margin-top", "90px" );
$( "#checkouthelp" ).css( "margin", "50px 50px 0 0" );

$( "#changelanguage" ).css( "float", "right" )
                      .css( "margin", "0 50px 0 0" );

テクニック B .append to head

$("<style>")
    .prop("type", "text/css")
    .html("\
    #doc {\
        margin-top:90px;\
    }\
    #checkouthelp {\
        margin:50px 50px 0 0;\
    }\
    #changelanguage {\
        float:right;\
        margin:0 50px 0 0;\
    }")
  .appendTo("head");

これは、小規模で比較的無害に始まったプロジェクトの 1 つですが、かなり肥大化した回避策に発展しました。ここで行っているように、オフサイトの css ファイルにリンクするか、css ルールを直接変更する方が速いですか。速度は重要な問題であり、上記のサンプルは成長するクラッジのほんの一部にすぎません。[ありがたいことに、根本的な原因が評価されています...しかし、それまでの間].

ありがとうございました！

アップデート

徹底的なテストは行っていませんが、Chrome の開発者ツールを使用して行ったいくつかの速度テストでは、外部スタイルシートからのルールの読み込みが遅いようです。さらにテストを行いますが、おそらく.css. この投稿への返信ありがとうございます。

4

3 に答える 3

3

オフサイトcssは行く方法です。オフサイト css を使用すると、ブラウザーは 1 つの要求を行うだけでよく、通常は非常に高速です。

一方、css 要素を変更するたびに、ブラウザーは dom ツリー全体を再解析する必要があり、おそらくよりコストがかかります。

他の重要な質問は次のとおりです。

ここでは、あなたが思っているほどスピードは本当に重要ですか? おそらく、これらのソリューション間の違いは 45 ミリ秒ですが、これは気にする必要はほとんどありません。コードをより速く記述し、それをより適切に維持できる手法を選択する必要があります。それがリアルタイムの節約になります。

于 2012-08-14T18:28:32.330 に答える
1

jQ を介して非セマンティック クラスを追加します。例: 'float-right'、'margin-right'。これは、imo を維持するためのよりクリーンな方法です。

于 2012-08-14T18:25:05.010 に答える
0

jQuery.cssは、提供したサンプルを頭に追加するよりも高速です。ここでこれを示すテストケースを作成しました：http：//jsperf.com/jquery-css-vs-append-to-head

ここに画像の説明を入力してください

オフサイトCSSに関しては、比較できません。オフサイトcssの速度は、サーバーの速度などとともに、ユーザーのインターネット接続に依存するためです。邪悪なサーバーとブロードバンドユーザーがいる場合は、オフサイトの方がはるかに優れていると思います。そうでない場合、速度を上げるには、JavaScriptのみを確実に信頼できます。

于 2012-08-14T19:12:40.553 に答える