Clever Geek Handbook

サイト開発時のHTMLおよびCSSからのJavaScriptおよびjQueryの最適化

こんにちは、ハラジテリ。 JavaScript + jQueryを使用する際の経験（ヒント）を共有したいと思います（実際、jQueryの代わりに他のJSフレームワークを使用できます）。 この記事はJSとjQueryの初心者にとって興味深いものですが、経験豊富な恐竜は通り抜けてはなりません。役に立つ情報を見つけることはかなり可能です。 基本的に、記事の中で私は明確なケースを挙げていませんが、「hundredTyschRazPovtor」の場所が適切であることがわかりました。



画像



初期化



非常に頻繁に、タグ内のJSファイルのロードを確認します. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). , . JS , .











. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). ,



. JS , .







. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). ,



. JS , .







、スクリプトの「開始」に. - ! ? JS HTML, . , JS ( , AJAX , URL Hash). ,



. JS , .







ほとんど影響しません。 ほとんどの場合、彼らはjQuery( document ).ready( function () { ... }



を使用します。これは、HTMLをロードした後にのみスクリプトを実行します。車を買う前にガソリンを買うようなものです。



HTMLのインラインJavaScript



これはひどいです！





セレクター



このトピックは古くからあり、最適化要求の検索エンジンでの最初の結果は、セレクターに関する記事を生成します。 それでも、ときどき記録されるだけです。 彼らが言うように、繰り返しは学習の母です。



セレクターはページのパフォーマンスに大きく影響します。 たとえば、最近の練習から、1人の同僚が大量のスクリプトを選択したため、サイトは文字通り8〜10秒間ハングしました。 フォームjQuery( 'input[name="some-specific-name"]' )



を選択するために、 jQuery( 'input[name="some-specific-name"]' )



を使用しました。これは〜10フォームと〜300フィールドのページにあります...このセレクターをIDに置き換える最大60〜90ミリ秒。



簡単に説明します。常にセレクタでIDを使用します。 これが不可能な場合は、親要素のIDを使用してから、別の要素（クラス、タグ、または属性）のみを使用します。 



 jQuery( '#element-id' ); //   jQuery( '#parent-element-id .needed-class-name' ); //   jQuery( '#parent-element-id a' ); //




.filter()



を.each()



代わりに、 .filter()



を使用してアイテムをフィルタリングします。

最初、最後、または特定の要素を選択するには、 .first()



.last()



.eq( index )







これはHTMLまたはCSSにどのように関係しますか？
JavaScriptまたはjQueryからのセレクターはページのレイアウトに直接依存するため、すべてが非常に簡単です。 レイアウトにクラスと識別子が1つもない場合の対処方法（もちろん、神秘主義ですが、明確な例として、それは解決されるはずです）。





アニメーション



ここではアニメーションのキューといくつかの要素の同時アニメーションに言及するのが適切だと思います-これは優先度の最適化ですが、検索エンジンがこれらのアイテムに関するすべての必要な情報を提供するため、詳細なコピーは行いません（フッターにリンクを示します）。



マージン（ margin



-CSSプロパティ）-これはアニメーションの最初の敵です。



どういうわけか、野生のアニメーションと独特のUI（各ブロックを拡大または近似できるブロックサイト。つまり、近似によってリンクによる遷移が置き換えられ、縮小されたビューがフルスクリーンナビゲーションのようなものになります。縮小形式の要素に加えて、トランジション、キーボードナビゲーション、スライド、カルーセル、ポップアップのスムーズな外観などのイベントのタッチ。 要するに、 すべてが同時に動くだけです。



巨大なサムネイルを同時にスムーズに移動することは、必ずしも簡単ではありません。 そして、そのような画像が13個あり、すべてを同時にアニメーション化する必要がある場合（ぼかし効果）？ これは脳の完全な脱臼です。 ここで、実際、最も悪意のある敵が見つかりました- margin



。 要素は（異なるインデントで）はしごで配置されているため、 margin



、 padding



、またはleft



いずれかを使用する必要がありました。 私の場合、突っ込みと複数のソートにより、 margin



を拒否するとFPSが20から35に上昇しました（Opera、Firefox、IE7.8。Chromeはすでに100を示していました）。



明確なルールとして、私はそれに耐えるつもりはありません、あなたが注意を払うことができるものについてのアドバイスとしてのみ。



ご清聴ありがとうございました。それだけです。



地下室


jQueryキューの詳細[ENG]

複数の要素をアニメーション化するjQueryの詳細[ENG]


More articles:


All Articles