[JS反対モード](1)繰り返し閲覧DOM

2466 ワード
テキストリンク

ぎゃくモード

const textContent = document.querySelector('.element').textContent;
const className = document.querySelector('.element').className;
const clientWidth = document.querySelector('.element').clientWidth;

良いモード

const {textContent,className,clientWidth} = document.querySelector('.element');

どうしたんですか。


MDNは、querySelectorを次のように記述します。


Note: The matching is done using depth-first pre-order traversal of the document's nodes starting with the first element in the document's markup and iterating through sequential nodes by order of the number of child nodes.

querySelectorを呼び出すと、DOMツリーで深さ優先順に移動して要素を検索します.
querySelectorを使用してDOMナビゲーションを繰り返すたびに、不要なナビゲーションコストが増加します.
必要なプロパティはキャッシュによって格納されるため、不要なナビゲーションを削減してナビゲーションコストを最小限に抑えることをお勧めします.

結論）不要な重複DOMナビゲーションを低減


注）Toast FEガイド

asp.Netデータバインドのインスタンスコード
初識Redis(二):Redisパブリケーション/サブスクリプションおよびトランザクション