JQuery パフォーマンスの最適化に関するいくつかの提案

ホームページ

ウェブフロントエンド

jsチュートリアル

JQuery パフォーマンスの最適化に関するいくつかの提案_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:48 PM

jqueryパフォーマンスの最適化

誰もが jquery パフォーマンスの最適化のトピックについて何らかの知識を持っている必要があります。以下は jquery のパフォーマンスの最適化について収集した情報です。参考にしてください。

1. セレクターのパフォーマンス最適化に関する提案

1. 常に #id セレクターから継承する: これは jQuery セレクターの黄金律です。 jQuery で要素を選択する最も速い方法は、ID で要素を選択することです。

2. クラスの前でタグを使用する: jQuery で 2 番目に高速なセレクターは、タグセレクター ($(‘head’) など) です。これは、ネイティブ Javascript メソッド getElementByTagName() から直接取得されるためです。したがって、クラスを変更するには常にタグを使用することが最善です (最も近い ID を忘れないようにしてください)。

3. サブクエリを使用します。将来の使用のために親オブジェクトをキャッシュします。

4. コンテキスト検索の代わりに find() を使用します。

5. 強力なチェーン操作を利用する: jQuery のチェーン操作を使用すると、セレクターをキャッシュするよりも効果的です。

2. DOM 操作を最適化するための提案

1. jQuery オブジェクトをキャッシュする: 頻繁に使用する要素をキャッシュします。 2. DOM 挿入を行う場合、すべての要素を 1 つの要素にカプセル化します。 ここでの基本的な考え方は、本当に必要なものをメモリ内に構築してから、DOM を更新することです。これは jQuery のベストプラクティスではありませんが、有効な JavaScript 操作には必要です。直接 DOM 操作は非常に遅い

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

3. 同等の関数の代わりに直接関数を使用する: パフォーマンスを向上させるには、$.get()、$.getJSON ()、$.post() の代わりに $.ajax() などの直接関数を使用する必要があります。次のいくつかは $.ajax() を呼び出します。

4. 後で使用するために jQuery の結果をキャッシュします。
多くの場合、javasript アプリケーションオブジェクトを取得します。App を使用して、後で使用するために頻繁に選択するオブジェクトを保存できます。

3. イベントのパフォーマンスを最適化するための提案

1. $(window).load:

を優先します。$(document).ready() よりも $(window).load() を使用した方が速い場合があります。後者はすべての DOM 要素を待機しないためです。ダウンロードが完了する前に実行されます。使用する前にテストする必要があります。

2. イベント委任を使用します: コンテナー内に多数のノードがあり、イベントをすべてのノードにバインドしたい場合、委任はそのようなアプリケーションシナリオに非常に適しています。委任を使用すると、親でイベントをバインドし、どの子ノード (ターゲットノード) がイベントをトリガーしたかを確認するだけで済みます。これは、大量のデータを含むテーブルがあり、td ノードにイベントを設定したい場合に非常に便利です。まずテーブルを取得し、次にすべての td ノードの委任イベントを設定します

4. その他の jQuery パフォーマンス最適化に関する一般的な提案

1. 最新バージョンの jQuery を使用します

多くの場合、最新バージョンが最適です。バージョンを変更した後は、必ずコードをテストしてください。完全な下位互換性がない場合もあります。

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

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

4. 冗長なコードのロードを避ける
Javascript コードを別のファイルに配置し、必要な場合にのみロードすることをお勧めします。こうすることで、不要なコードやセレクターをロードしなくなります。コードの管理も簡単です。

5. 1 つのメイン JS ファイルに圧縮し、ダウンロード数を最小限に抑えます
どのファイルをロードするかを決定したら、それらを 1 つのファイルにパッケージ化します。 Minify (バックエンドコードに統合) を使用するか、JSCompressor、YUI Compressor、Dean Edwards JS Packer などのオンラインツールを使用してファイルを圧縮するなど、いくつかのオープンソースツールを使用してファイルを自動的に圧縮します。私のお気に入りは JSCompressor です。

6. 必要に応じてネイティブ Javascript を使用します
jQuery を使用することは素晴らしいことですが、JQuery は Javascript のフレームワークでもあることを忘れないでください。そのため、jQuery コードで必要に応じてネイティブ Javascript 関数を使用でき、パフォーマンスを向上させることができます。

7. Google から jQuery フレームワークをロードします
アプリケーションが正式に起動されたら、ユーザーは最も近い場所からコードを入手できるため、Google CDN から jQuery をロードしてください。これにより、サーバーリクエストを減らすことができ、ユーザーが同じく Google CDN の jQuery を使用する別の Web サイトを閲覧すると、ブラウザはキャッシュから jQuery コードを即座に呼び出します。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。

axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。

jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。

jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。

jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。