jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。
jQueryを適切に記述する事である程度の改善は出来るので、しっかりと覚えましょう。
★セレクターの指定はID
やむを得ずクラス名で指定しなければいけない場合以外は必ず「ID名」を指定しましょう。
同じIDでの指定でも
| $(“#target”).css({‘color’:’red’}); |
| $(“div#target”).css({‘color’:’red’}); |
★同じセレクタは変数化する
| var target = $(‘.target p‘); target.css({‘background-color’:’red’}); target.show(); |
| $(‘.target p‘).css({‘background-color’:’red’}); $(‘.target p‘).show(); |
★連続した処理はメソッドチェーンを使う
| $(‘#target p’).css({‘background-color’:’red’}).show(); |
★jQuery本体は必ず最新の物を使う
★jQueryはホスティングされているもの(CDN)を使う
ファイルデータの大きいjQuery本体をCDNにする事で実際には色々なメリットがあります。
メリット
- 高速化
- 他サイトでのキャッシュが期待できる（※）
- 自サーバーにJQueryを置く必要がない
などですが、
一方、万が一CDNがダウンしてしまった場合などには使えなくなってしまいます。このようなトラブルが起こったときに代替策として、フォールバックという方法があります。
| <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <!– CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む –> <script> window.jQuery || document.write(‘<script src=”js/jquery-3.2.1.min.js”><\/script>’); </script> |
参考サイト