ホームページ ウェブフロントエンド jsチュートリアル jQuery パフォーマンスの最適化に関する 38 の提案_jquery

jQuery パフォーマンスの最適化に関する 38 の提案_jquery

May 16, 2016 pm 04:57 PM
jquery

1. jQuery 変数定義時の var キーワードの追加に注意
これは jQuery に限らず、JavaScript 開発プロセス全体で注意が必要ですので、定義しないでください。
$loading = $('#loading'); //これはグローバル定義です。誤って同じ変数名をどこかで参照すると、死ぬほど落ち込むことになります。
2. var を使用して変数を定義します
複数の変数を使用する場合は、次のように定義してください:

コードをコピーコードは次のとおりです:
var page = 0,
$loading = $('#loading'),
$body = $('body');

重度の強迫性障害がある場合を除き、すべての変数 A var キーワードに追加しないでください
3. $ 記号を追加して jQuery 変数を定義します
変数を宣言または定義するときは、次の点に注意してください。 jQuery 変数を定義している場合は、次のように変数の前に $ 記号を追加してください:
コードをコピーコードは次のとおりです。
var $loading = $('#loading');

このように定義する利点は、コードを読んだ自分や他のユーザーに効果的に思い出させることができることです。これが jQuery 変数であることを示します。
4. DOM を操作するときはキャッシュを覚えておいてください
jQuery コード開発では、DOM 操作は非常にリソースを消費するプロセスであることが多く、多くの人が好んで使用します。 jQuery は次のようになります:
コードをコピーします コードは次のとおりです:

$('# loading' ).html('Complete');
$('#loading').fadeOut();

コード自体は問題なく実行でき、結果も得られます。ただし、$('#loading') を呼び出すときは常に注意してください。新しい変数を再利用する必要がある場合は、変数の内容を効果的に使用できるように、変数内で定義することを忘れないでください。
コードをコピー コードは次のとおりです:
var $loading = $(' #loading');
$loading.html('Finished');$loading.fadeOut();

これにより、パフォーマンスが向上します。
5. チェーン操作を使用します
上記の例をより簡潔に書くことができます:
コードをコピー コードは次のとおりです:

var $loading = $('#loading');
$loading.html('Complete').fadeOut();

6. jQuery コードの合理化
いくつかのコードを統合してみます。
コードをコピー コードは次のとおりです:
//! !悪役
$button.click(function(){
$target.css('width','50%');
$target.css('border','1px Solid #202020' ) ;
$target.css('color','#fff');
});
は次のように記述する必要があります:

コードをコピー コードは次のとおりです:
$button.click(function(){
$target.css({'width':'50% ','border ':'1px Solid #202020','color':'#fff'});
});

7. グローバル型セレクターの使用を避ける
次のようには書かないでください: $('.something > *');
次のように書くことをお勧めします: $('.something').children();

8.複数のIDを重複させないでください
次のような記述はしないでください: $('#something #children');
これだけで十分です: $('#children');

9より論理的な判断を使用します || または && を使用して高速化します。

コードをコピーしてください コードは次のとおりです: if(!$something) {
$something = $('#something ');
}

書き込みパフォーマンスは


コードをコピー コードは次のとおりです。$something= $something|| ('#何か');
10. コードの使用量を減らしてください。
次のように記述する代わりに、if(string.length > 0){..}
のように記述します。 length) {..}
11. .on メソッドを使用してみる
新しいバージョンの jQuery クラス ライブラリを使用する場合は、他のメソッドは最終的に .on を使用してください。を達成するために。
12. jQuery の最新バージョンを使用してみる
jQuery の最新バージョンはパフォーマンスが優れていますが、最新バージョンは ie6/7/8 をサポートしていない可能性があるため、調整する必要があります。実際の状況に応じて状況を選択します。
13. ネイティブ JavaScript を使ってみる
jQuery が提供する機能がネイティブ JavaScript でも実装できる場合は、ネイティブ JavaScript を使用して実現することをお勧めします。
14. 常に #id セレクターから継承
これは jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。
コードをコピー コードは次のとおりです。
$('#content').hide();

または、ID セレクターから継承して複数の要素を選択します。
コードをコピーします コードは次のとおりです。
$('#content p').hide();

15. クラスの前にタグを使用します
jQuery で 2 番目に速いセレクターは、タグ セレクター ($('head') など)。ネイティブ Javascript メソッド getElementByTagName() から直接取得されるためです。したがって、クラスを変更するには常にタグを使用することをお勧めします (最も近い ID を忘れないでください)
コードをコピー コードは次のとおりです
var acceptNewsletter = $('#nslForm input.on');

jQuery のクラス セレクターは、IE ブラウザーですべての DOM ノードを走査するため、最も遅くなります。クラスセレクターの使用は避けてください。 ID の変更にもタグを使用しないでください。次の例では、すべての div 要素を走査して、ID が「content」のノードを見つけます。
コードをコピーします コードは次のとおりです。
var content = $('div#content'); // 非常に遅いので、使用しないでください。

ID を使用して ID を変更するのは不要です:
コードをコピーします コードは次のとおりです:
var Traffic_light = $('#content #traffic_light') // 非常に遅いです、ドン。

を使用しないでください。16. サブクエリ
を使用して、将来の使用のために親オブジェクトをキャッシュします

コードをコピー コードは次のとおりです。
var header = $('#header');
var menu = header.find('.menu');
// または
var menu = $('.menu', header);

17. Sizzle の「右から左」モデルに適用可能なセレクター
バージョン 1.3 以降、jQuery は Sizzle ライブラリを使用します。これは、セレクター エンジンでの動作方法が以前のバージョンとは大きく異なります。これは、「右から左」モデルを「左から右」モデルに置き換えます。右端のセレクターが限定的で、左端のセレクターが広範囲であることを確認してください:
コードをコピー コードは次のとおりです:
var linkContacts = $('.contact-links div.side-wrapper');

を使用する代わりに
コードをコピー コードは次のとおりです:
var linkContacts = $('a.contact-links .side-wrapper');

18. find( ) を使用します。確かに、コンテキストを使用せずに
.find() 関数を検索する方が高速です。ただし、ページに多くの DOM ノードがある場合は、前後の検索にさらに時間がかかることがあります。
コードをコピー コードは次のとおりです。
var divs = $('.testdiv', '#pageBody'); // Firebug 3.6 の 2353
var divs = $('#pageBody').find('.testdiv') ); // Firebug 3.6 では 2324 - 最高の時間
var divs = $('#pageBody .testdiv'); // Firebug 3.6 では 2469

19. 独自のセレクターを作成します
コードでセレクターを頻繁に使用する場合は、jQuery の $.expr[':'] オブジェクトを拡張して独自のセレクターを作成します。次の例では、非表示の要素を選択するためにアバブザフォールドセレクターを作成しました:
コードをコピー コードは次のとおりです:
$.extend($.expr[':'], {
Abovethefold: function(el) {
return $(el).offset().top < $(window) .scrollTop( ) $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold') // 要素

20 を選択します。 jQuery オブジェクトをキャッシュする
頻繁に使用する要素をキャッシュします:
コードをコピー コードは次のとおりです:

var header = $('#header');
var divs = header.find('div');
var Forms = header.find('form') ;

DOM の挿入が必要な場合は、すべての要素を 1 つの要素にカプセル化します

21. 直接の DOM 操作は非常に遅いです。 HTML 構造の変更は最小限に抑えます。

コードをコピー コードは次のとおりです。

var menu = '< ul id= "menu">';
for (var i = 1; i <100; i ) {
menu = '
  • ' i '
  • ';
    }
    menu = '';
    $('#header').prepend(menu);
    // これは絶対に行わないでください:
    $('#header') .prepend('');
    for (var i = 1; i $('#menu') .append('
  • ' i '
  • ');

    }
    22. jQuery は例外をスローしませんが、開発者はオブジェクトも検査する必要があります

    jQuery はユーザーに大量の例外をスローしませんが、開発者はこれに依存すべきではありません。 jQuery は通常、オブジェクトが存在するかどうかを判断する前に、無駄な関数を多数実行します。したがって、オブジェクトへの一連の参照を行う前に、まずそのオブジェクトが存在するかどうかを確認する必要があります。
    23. 同等の関数の代わりに直接関数を使用する
    パフォーマンスを向上させるには、$.get()、$ の代わりに $.ajax() などの直接関数を使用する必要があります。 getJSON()、$.post()、後者は $.ajax() を呼び出すためです。
    24. 後で使用するために jQuery の結果をキャッシュする
    多くの場合、javasript アプリケーション オブジェクトを取得します。App を使用して、頻繁に使用するオブジェクトを保存できます。使用方法:

    コードをコピーします コードは次のとおりです。

    App.hiddenDivs = $('div.hidden ');
    // 次に、アプリケーションを呼び出します:
    App.hiddenDivs.find('span');

    25. jQuery の内部関数 data( ) を使用して状態を保存します
    情報を保存するには .data() 関数を使用することを忘れないでください:
    コードをコピー コードは次のとおりです:

    $('#head').data('name', 'value');
    // 次に、アプリケーションでそれを呼び出します:
    $('# head')。 data('name');

    26. jQuery ユーティリティ関数を使用する
    シンプルで実用的な jQuery ユーティリティ関数を忘れないでください。私のお気に入りは $.isFunction()、$isArray()、$.each() です。
    27. HTML ブロックにクラス "JS" を追加します
    jQuery が読み込まれたら、まず HTML に "JS" というクラスを追加します
    コードをコピー コードは次のとおりです:
    $('HTML').addClass('JS');

    ユーザーの場合のみ CSS スタイルを追加できるのは、JavaScript が有効になっている場合のみです。例:
    コードをコピーします コードは次のとおりです:
    /* in css*/
    .JS # myDiv{display:none;}

    JavaScript が有効になっている場合は、HTML コンテンツ全体を非表示にし、jQuery を使用して目的のことを実現できます (たとえば、ユーザーがパネルをクリックしたときに特定のパネルを折りたたんだり展開したりするなど)。 Javascript が有効になっていない場合、ブラウザはすべてのコンテンツをレンダリングし、検索エンジン クローラーもすべてのコンテンツを削除します。今後はこのテクニックをもっと活用していきたいと思います。
    28. $(window).load を優先します
    場合によっては、$(document).ready() よりも $(window).load() の方が高速であるため、後者はすべての DOM 要素の前に実行されます。ダウンロードされています。使用する前にテストする必要があります。
    29. イベント委任を使用する
    コンテナ内に多数のノードがあり、イベントをすべてのノードにバインドしたい場合、委任はそのようなアプリケーション シナリオに非常に適しています。委任を使用すると、親でイベントをバインドし、どの子ノード (ターゲット ノード) がイベントをトリガーしたかを確認するだけで済みます。これは、大量のデータを含むテーブルがあり、td ノードにイベントを設定したい場合に非常に便利です。まずテーブルを取得し、次にすべての td ノードの委任イベントを設定します:
    コードをコピー コードは次のとおりです:
    $ ("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
    });

    30.ready イベントの略語を使用します
    js プラグインを圧縮してすべてのバイトを保存したい場合は、$(document).onready()
    コードをコピー コードは次のとおりです:
    //
    $(document).ready(function ( ){
    // コード
    });
    // 次のように省略できます:
    $(function (){
    // コード
    });

    31. jQuery 単体テスト
    JavaScript コードをテストする最良の方法は、人にテストしてもらうことです。ただし、Selenium、Funcunit、QUIT、QMock などの自動化ツールを使用して、コード (特にプラグイン) をテストできます。この件については言いたいことがたくさんあるので別のトピックで取り上げたいと思います。

    ThreeTwelve. jQuery コードを標準化する
    コードを頻繁に標準化して、どのクエリが遅いかを確認し、置き換えます。 Firebug コンソールを使用できます。 jQuery のショートカット関数を使用してテストを容易にすることもできます:

    コードをコピーします コードは次のとおりです:
    // Firebug コンソールにデータを記録するためのショートカット
    $.l($('div'));
    // UNIX タイムスタンプを取得します

    $.time();

    // Firebug でコードの実行時間を記録します

    $.lt();
    $('div');
    $.lt();

    // コード ブロックを for ループに入れて実行時間をテストします

    $.bm("var divs = $('.testdiv', '#pageBody');" // Firebug の 2353 3.6


    33. HMTL5 を使用する
    新しい HTML5 標準は、より軽量な DOM 構造をもたらします。構造が軽いということは、jQuery を使用するときに必要なトラバーサルが少なくなり、読み込みパフォーマンスが向上することを意味します。したがって、可能であれば HTML5 を使用してください。

    34. 15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM 要素に直接追加します。
    いくつかの要素にスタイルを追加するには、jQuey CSS を使用するのが最善の方法です。 () 関数。ただし、15 を超える要素にスタイルを追加する場合は、スタイル タグを DOM に直接追加する方が効率的です。この方法では、コード内でのハードコードの使用を回避します。

    コードをコピー コードは次のとおりです。
    $('')
    .appendTo('head');

    35. 冗長なコードのロードを避ける
    JavaScript コードを別のファイルに配置し、必要な場合にのみロードすることをお勧めします。こうすることで、不要なコードやセレクターをロードしなくなります。コードの管理も簡単です。
    36. 1 つのメイン JS ファイルに圧縮し、ダウンロード数を最小限に抑えます。
    どのファイルをロードするかを決定したら、それらを 1 つのファイルにパッケージ化します。 Minify (バックエンド コードに統合) を使用するか、JSCompressor、YUI Compressor、Dean Edwards JS Packer などのオンライン ツールを使用してファイルを圧縮するなど、いくつかのオープン ソース ツールを使用してファイルを自動的に圧縮します。私のお気に入りは JSCompressor です。
    37. 必要に応じてネイティブ Javascript を使用する
    jQuery を使用することは素晴らしいことですが、JavaScript のフレームワークでもあることを忘れないでください。そのため、jQuery コードで必要に応じてネイティブ Javascript 関数を使用でき、パフォーマンスを向上させることができます。
    38. 速度と SEO の利点のためのコンテンツの遅延読み込みは、読み込み速度を向上させるだけでなく、SEO の最適化も向上します (速度と SEO の利点のためのコンテンツの遅延読み込み)
    Web サイトの読み込みに Ajax を使用します、これによりサーバー側の読み込み時間を節約できます。一般的なサイドバー ウィジェットから始めることができます。
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

    jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

    jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

    jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

    jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

    jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

    jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

    タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

    徹底した分析: jQuery の長所と短所 徹底した分析: jQuery の長所と短所 Feb 27, 2024 pm 05:18 PM

    jQuery は、フロントエンド開発で広く使用されている高速、小型、機能豊富な JavaScript ライブラリです。 2006 年のリリース以来、jQuery は多くの開発者にとって最適なツールの 1 つとなっていますが、実際のアプリケーションでは、いくつかの利点と欠点もあります。この記事では、jQuery の長所と短所を詳しく分析し、具体的なコード例で説明します。利点: 1. 簡潔な構文 jQuery の構文設計は簡潔かつ明確であるため、コードの読みやすさと記述効率が大幅に向上します。例えば、

    jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

    タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

    jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

    jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

    jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

    jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

    See all articles