macOS Mojave で Typescript ファイルの中身を Quick Look で見れるようにする
macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル（拡張子が .ts /...
idセレクタを使いましょう
jQueryでのセレクタは次の順番で速いようです：- idで指定する
- タグ名で指定する
- classで指定する
- 属性で指定する
- jQuery独自拡張セレクタで指定する
idで取得するときにタグ名を指定しないように
var $hoge = $('div#hoge'); のような指定の仕方はアウトです。なぜならhogeというidを見つけるためにdiv要素をすべて探す必要があるからです。単に var $hoge = $('#hoge'); のようにしてください。これでjQueryはJavaScriptのネイティブ関数であるgetElementByIdを使ってオブジェクトを取得します。
クラスセレクタよりも要素セレクタを使いましょう
クラスセレクタよりも要素セレクタの方が速いようです。これは要素セレクタを使うとJavaScriptのネイティブ関数であるgetElementsByTagNameを使えるからです。セレクタを使用する際の優先度としてはid > 要素 > classの順番です。クラスセレクタでは要素名を指定しましょう
クラスでオブジェクトを取得するときはvar $hoge = $('.hoge'); ではなくて var $hoge = $('div.hoge'); のように要素名を”.”の前に書く、ということです。
複数の要素を並べるときはidを先頭にしましょう
var $hoge = $('div #hoge') はアウトです。正解は var $hoge = $('#hoge div') です。
複数のidを並べてオブジェクトを取得しないように
var $hoges = $('#hoge #hogehoge') はすごく遅くなるそうです。idセレクタを使うときは一つのidを使うようにしましょう。
コンテクストを直接指定するよりもfind()を使いましょう
jQueryオブジェクトのキャッシュを使いましょう
$('#hoge') が出てくるたびに getElementById でオブジェクトを取得しようとするから、ダメな例はそれだけ遅くなります。何度も使うオブジェクトはキャッシュしてください。
サブクエリを使いましょう
ある要素の子要素を取得するときは、まず親要素をキャッシュした上で子要素を取得しましょう。つまりメソッドチェインを使いましょう
先ほどの正解例はメソッドチェインを使っていないのでアウトです。DOM操作は最小限に抑えましょう
例えば100個のli要素をjQueryで追加する場合を考えましょう。このときのダメな例と正解例はこのようになります：15個以上の要素にスタイルを適用する場合はcssメソッドではなくてstyleタグを追加しましょう
例えばhogeクラスをもったdiv要素に"color: red" を追加するとしましょう。そのとき、hogeクラスをもったdiv要素が15個以上ある場合は $('div.hoge').css('color','red'); ではなくて $('<style> div.class { color: red; } </style>').appendTo('head'); のようにhead要素内にstyleタグを追加しましょう。
jQuery(document).ready(function)の代わりにjQuery(function)を使いましょう
この二つは同じです：jQuery(window).loadとjQuery(document).readyを使い分けましょう
この二つは実行されるタイミングが異なります。$(document).ready はDOMが構築された時点で実行されますが、$(window).load は画像を含めてページの読み込みがすべて完了した後で実行されます。実行されるタイミングが違うわけですから、$(window).load でできることはそちらに任せましょう。