jQuery_jquery を使い始めるための簡単なガイド

はじめに

jQuery は、Web 開発の分野で最も広く使用されている軽量 JavaScript ライブラリであると言えます。プロの Web 開発者だけでなく、多くの新しい Web 開発者や Web 愛好家も、jQuery 開発を使用して簡単に JavaScript に統合できます。 。

そして、これをより良くしたい場合は、ベストプラクティスを学び、理解する必要があります。ベストプラクティスとは、ある技術分野の発展とともに徐々に確立されてきた最新の技術や開発手法に関する情報であり、Web開発の現場でも非常に役立ちます。

この記事の内容は、優れたフロントエンド エンジニア、Addy Osmani の jQuery パフォーマンスのヒントとコツを参照しています。興味がある場合は、Addy Osmani 自身のこのマスターのスピーチ PPT も参照してください。 jQueryのコアチーム(jQuery Core Teams)のメンバーの1人。
jQuery のベスト プラクティスに従う必要がある理由

Web 開発分野におけるパフォーマンスの追求は決して止まることはありません。 jQuery は非常に強力な開発ツールですが、不適切に使用すると、ブラウザに余分な作業と負担がかかり、開発された Web アプリケーションがより多くのシステム リソースを占有し、実行速度が遅くなる原因にもなります。そして、優れた Web アプリケーションには新鮮さと柔軟性が必要であることは誰もが知っています。

JavaScript のパフォーマンスを判断するにはどうすればよいですか?さて、この種のパフォーマンス テストは実行速度として要約できます。簡単に言えば、ある書き込みメソッドが同じ関数の別の書き込みメソッドよりも高速に実行される場合、この書き込みメソッドはより優れたパフォーマンスを達成できます。もちろん、これはパフォーマンスの観点からのみ考慮されており、コードの保守性は含まれていません。さまざまな JavaScript コード スニペットのパフォーマンスを自分でテストしたい場合は、jsPerf.com を使用することをお勧めします。このサイトは、JavaScript パフォーマンス テスト ケースを簡単に作成し、テスト結果を保存して共有するのに役立ちます。 jQuery チームは、JavaScript のパフォーマンス テストにもこれを使用しています。
jQuery の使用に関する提案
1. 最新バージョンを使用します

新しいバージョンの jQuery によって提供される API は、パフォーマンスを向上させ、いくつかの既存のバグを修正します。多くの Web サイトで jQuery が使用されているため、jQuery の新しいバージョンへの変更はそれぞれ非常に厳格なテストを受け、通常はアップグレードによって問題が発生することはありません。

さらに、jQuery の新しいバージョンでは、開発作業を容易にするために API に非常に有用な変更が加えられる可能性があります。たとえば、jQuery 1.7 より前では、イベント バインディングには、bind()、delegate()、および live() メソッドが使用されていました。同じイベントバインディングですが、それぞれのメソッドに目的があるため、「いつどれを使えばいいのか？」という悩みが生じます。 jQuery 1.7 以降、on() と off() という 2 つの新しいメソッドが追加され、すべてのイベントのバインディングと削除を完了するために推奨されるため、非常に理解しやすくなります。
2. セレクターを理解する

jQuery では、すべてのセレクター (セレクター) のパフォーマンスが同等であるわけではありません。つまり、さまざまなセレクター記述方法を使用して特定の要素を選択できますが、パフォーマンスの点ではそれらが同じであるとは考えないでください。

jQuery のセレクターは、最速から最低までさまざまな速度で実行されます。

• ID セレクター ($(#ElementId))
• 要素セレクター ($(form)、$(input) など)
• クラスセレクター ($(.someClass))
• 疑似クラスと属性セレクター ($(:hidden)、$([attribute=value]) など)

ブラウザがサポートするネイティブ DOM 操作メソッド (document.getElementById() など) が利用できるため、ID セレクターと要素セレクターが最も高速です。クラス セレクターがわずかに遅いのは、IE6 ～ IE8 がネイティブの getElementsByClassName() をサポートしていないためですが、このネイティブ メソッドをサポートする他の最新のブラウザーでは、クラス セレクターは依然として非常に高速です。

最も遅い疑似クラスと属性セレクターに関しては、ブラウザーが対応する関数に利用可能なネイティブ メソッドを提供していないためです。 jQuery は、最新のブラウザーで一部の jQuery セレクターのパフォーマンスを向上させるために、2 つのネイティブ セレクター API (css クエリ API に属する) である querySelector() と querySelectorAll() を使用しようとしましたが、全体的にはまだ比較的遅いです。もちろん、これは、jQuery が疑似クラスと属性セレクターに対してより高い API 要件を備えているためです。CSS の有効なセレクターである input[type="text"] をサポートするだけでなく、要素の p:first もサポートする必要があります。ですが、これは CSS では不正なセレクターです。つまり、jQuery の疑似クラスと属性セレクターは非常に強力ですが、使用には注意してください。
3. 操作した要素をキャッシュします

var parents = $('.parents');
var children = $('.parents').find('.child'); //bad

キャッシュとは、後で再度呼び出せるように、jQuery セレクターの戻り結果を保存することを指します。各 $('.whatever') は DOM を再検索して jQuery コレクションを返すため、再利用は回避されます。

ネイティブ JavaScript では、データまたはオブジェクトをキャッシュするローカル変数を確立すると、コードを合理化し、パフォーマンスを最適化するのに役立ちます。同じ原則がここにも当てはまります。
4.チェーン構文

var parents = $('.parents').doSomething().doSomethingElse();

jQuery中大部分方法都返回jQuery包装集并支持这种链式语法。javasript的性能优化要点之一是最小化语句数，因此链式语法不仅写起来更容易，运行起来也会更快。
5.使用事件代理

利用事件冒泡，指定一个位于dom较高层级的元素（比如document）的事件处理程序，就可以管理某一类型的所有事件。减少了页面中添加的事件处理程序，自然可以提升整体性能。
6.最小化现场更新

如果你进行操作的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。现场更新需要浏览器重新计算尺寸，涉及到重绘（repaint）和回流（reflow），有较高的性能花费，因此应减少使用。

在新增内容时，建议先把要新增的代码段合并完全，最后再使用单个append()方法添加到页面。而如果元素存在复杂的交互，比如反复地添加和移除，detach()这个针对性的方法就是最佳的选择。
7.不在不必要的时候使用jQuery方法

$('.nav_link').bind('click', function() {
  console.log('nav id: ' + $(this).attr('id'));  //bad

$.data(elem, key, value);  //significantly faster

};

jQuery方法不一定是最好的方法。这里使用$(this).attr('id')获取当前事件元素的ID，为当前事件元素创建了jQuery包装集，然后调用attr()属性获取方法。但这都是额外的性能花费。事实上，this在事件函数内就表示当前事件元素，直接使用this.id就可以获取元素ID，这种原生DOM属性的写法要更快。
8.适当使用jQuery工具函数

操作jQuery包装集的方法（也就是写在$.fn中的方法），其中一部分也有作为jQuery工具函数（直接写在$中的方法）的同类方法。由于jQuery工具函数在使用中不涉及创建jQuery包装集，因此，在部分情况下，可以通过换用jQuery工具函数提升性能。

比如，在DOM中存储数据，一般的做法是：

$('#elem').data(key, value);  //common way

但改为下边的写法会快很多：

需要的注意的是，虽然下面这种方法更快，但作为参数传入的元素不能用选择符，而要用元素本身。
结语

我自己整理和写本文内容时，也感觉很有收获。jQuery是一个很强大的工具，但进一步说，也只提供了web开发的最基本的内容，更高级更复杂的内容，还需要自己不断学习和创作。在这个过程中，遵循最佳实践，养成良好的习惯，会有很大的益处，并逐渐做得更出色！