DOMのセレクタは初期のレベルで宣言しよう

たとえばメソッド内に

document.querySelector("hoge")

を書いているとして、
毎度呼び出されているとパフォーマンス（速度）に影響が出ます。
（もしメソッドが頻繁に呼び出され、DOMの検索が重い場合とか。）

どうすれば

コンストラクタで要素を一度だけ検索し、その参照をクラスのプロパティとして保持する方法もあります。

    hoge: HTMLInputElement;
    test: HTMLElement | null;

    constructor() {
        this.hoge = document.querySelector<HTMLInputElement>('input[type="checkbox"][name="hogehoge"]:checked');
        this.test = document.querySelector<HTMLElement>('.test-class');
    }

以下が期待できます。

• パフォーマンス低下の回避
  • DOMを一度だけ検索するため、頻繁な検索によるパフォーマンスの低下を回避できる。
• 記述が煩雑にならない
  • 要素の参照を一箇所で管理することで、コードがより整理され再利用性が高まる。

staticとしてまとめてあげて使用することも可能。

static hogeElements = {
        hoge: document.querySelector<HTMLInputElement>('input[type="checkbox"][name="hogehoge"]:checked');
        test: = document.querySelector<HTMLElement>('.test-class');
}

注意点

ただ注意点はあってDOMが動的に変更されることがあれば
処理毎にDOMをセレクタしてやらないと期待した動作にならないです。
更新によって指定していたDOMが古くなってしまうためです。

非同期なんかで毎度テンプレートを取得してHTMLを再生成するアーキテクチャとかがその例です。

なのでDOMに動的変更がある際は注意する。