DOM とは何ですか?それは何を食べるのでしょうか？

DOM (Document Object Model) は Web ページとその開発の基礎です。これは、HTML および XML ドキュメント用のプログラミング インターフェイスであり、ドキュメントの構造をツリー状のオブジェクトで表します。枝と葉付き。ドキュメント内の各要素、属性、およびテキスト部分が、このツリー内のノードになります。これにより、JavaScript が HTML 要素と対話したり、要素を変更したり、新しい要素を追加したりできるようになります。これは、すべての人が Web 上で経験すること、インタラクション、可変性、動的な視覚的な手がかりや要素を大まかにダイジェストしたものです。ボタンや光るメニューをクリックすると、脳は何かが起こることを期待します。文を変更するか、新しいページをロードするか、またはオンライン注文が正常に支払われたことを示す緑色のチェック マーク付きのポップアップを表示します。

DOM の操作が 1 秒ごとに速すぎることは、ユーザー維持やユーザーからの基本的なインタラクションにとっても大きな問題です。ユーザー エクスペリエンスを作成および拡張できる動的な動作がすべてあるとしても、DOM 操作を過剰に使用すると、非常にイライラする可能性があります。そして最後の言葉は常にユーザーからのものです。ページのバックグラウンドでデータのフェッチなどの重要な操作が行われているにもかかわらず、ユーザーが操作した直後にパフォーマンスが低下し、刻々と悪化する場合、問題点を特定するのは非常に困難で気が遠くなる可能性があります。

基本的な方法を使用して高速に実行する簡単な方法の例は、バニラ JS の textContent を使用することです。はい、知っています。ほとんどの場合、非常に動的で変更可能なコンポーネントには、状態管理などを使用する必要がある必要があるため、複雑なライフサイクルが必要になります。しかし、常にそうとは限りません。一部のテキストを変更したり、セッションごとに Cookie を更新したりするだけの場合、本当にそのような複雑なロジックとリソースを必要とするオプションを使用する必要がありますか?

textContent 関数は、同様の機能オプション (たとえば、より一般的な innerHtml メソッド) と比較した場合、js でテキストを操作するのに最も高速です。参考として、これらの時間制限付きテストを参照してください。

なぜ？

他の方法でより影響力のある操作のためにユーザーのマシンのメモリを節約できます。たとえば、非常に古い Android デバイスや Apple デバイスでは、アクセス可能で適度に高速であることが必須となる場合があります。あるいは、API 呼び出しで返される JSON が大きすぎて、解析と適切な操作に数秒かかる場合もあります。したがって、ユーザーがフィードバックを受け取らない、または画面上で CSS アニメーションを見続けるのは 1 秒ごとにカウントされます。

私は最近、挑戦と学習経験として、依存関係のない JavaScript でコーディングすることで多くのことを学びました。データを取得して、HTML、CSS、JavaScript だけを使用して To Do アプリを作成するのと同じです。 npmもライブラリもありません。そして、DocumentFragment オブジェクトなど、これまで聞いたことのない Web API のメソッドやオブジェクトを多数発見しました。これにより、DOM 構造の空の「フラグメント」が作成され、実際にページの DOM を変更する前に、それを操作してデータを設定できるようになります。したがって、メニューのリストや非常に豪華な AI 搭載ツールのタイトルを含むオブジェクトをロードし、操作の追加とタグのネストが完了したら、それを DOM に 1 回パッチします。これにより、多数の同一の呼び出しで for ループを実行し、各呼び出しの最後にツリーの新しい解析が必要になるのではなく、解析が一度に 1 回だけ行われるようになります。

それでは、私のユースケースでは 1 秒間に 1 回以上という非常に高速なレンダリングが必要なため、非常に速くボタンをクリックしたとしましょう。この場合、お気に入りの状態管理ライブラリを使用すると、ある種の障壁が作成される可能性があります。クリックするたびに新しいイベントが発生するため、デフォルトでは、スタック内のイベントの 2 番目のインスタンスを開始する前にイベントを終了する必要があります。非同期操作の複雑さやニーズによっては、1 秒以上かかる場合があります。この使用例では、 は取引の妨げとなります。したがって、適切なツールの選択は、より簡単に、より短時間で、さらに迅速に行うことができます。最近では、最近同じイベントが新しく発生したときに再レンダリングの実行を中断するなど、この問題を解決するために一般的なライブラリが提供するオプションがあります。ただし、ここで私が言いたいのは、単に美しくモダンな外観の Web アプリケーションを追求することではないということです。しかし、メンテナンスをできる限り簡単にして自分の生活を楽にするためには、誰かが書いたコードの塊を盲目的に信じてそれが最善の選択肢だということで自分を傷つけないようにするためです。

プロジェクトを起動するためにこれらのパッケージとライブラリをすでにインストールしている場合は、エラーや例外によって不明な関数呼び出しや暗号メッセージがコンソールに吐き出される理由を調査してみてはいかがでしょうか?

結論ととりとめのない余談

クラウド上や非常に一般的なサービスでサービスを無料で立ち上げて実行することは、今日では非常に迅速かつ簡単に行うことができます。出発点のようなボイラー プレートを使用すると、非常に役立ち、非常に基本的な繰り返しのタスクを心配する必要がなく、時間を節約できます。ターミナルに 1 つのコマンドを入力するだけで、ベース ルーティングと hello world ページがローカル サーバー上で実行されます。

インターネット上のどこにも、決定的なライブラリやフレームワーク全体が内部で何をしているのかを常に知ることはできません。しかし、物事がどのように機能するかを知れば知るほど、より多くの情報に基づいた決定を下し、効率的に作業できるようになります。

Web 開発用の最も人気のあるフレームワークは、実際に再レンダリングを最適化したり、仮想 DOM などのリソースを使用して DOM を操作したり、データを取得する非常に要求の厳しい操作のためにある種の永続性を実装したりするという非常に優れた仕事をします。

ここでは、選択した Web ブラウザーの Web 開発者ツールがあなたの親友です。これらのツールの新しいバージョンでは、テレメトリを提供し、コードのどの部分またはどの呼び出しがパフォーマンスの妨げになる可能性があるかを示すこともできます。

JavaScript 言語がどのように動作するか、またはその動作方法がどのように実装されているかを知ることで、お気に入りのライブラリからすぐに使用できる関数を使用することで、より肥大化したコード ベースの作成を余儀なくされ、問題の解決に集中できなくなる可能性がある状況を簡単に特定できます。問題。自分が何百回も書いたコードを複製することに注意が奪われてしまうかもしれません。また、AI によって生産性が向上したとしても、人工の仲間が提案したソリューションを使用するという罠に陥る可能性があり、実際には将来の保守が困難になるだけです。

心配しないでください、私たちにはよくわからないこともあります。先ほども言いましたが、いつでもすべてを知ることはできる人はいません。

より寛容な瞬間に実験して間違いを犯すことは、大いに役立ち、より良く行うために必要なツールを与えてくれます。次回、静的ファイル サーバーをデプロイしたり、非常に特殊なユースケースに非常に複雑なロジックをコーディングしたりするなど、単純なことを行うことに遭遇したとき、基本を知っていれば、かなり遠くまで到達し、キャリアの中で新しい問題に直面するときにより明確になります。

Web API のドキュメントを確認することを強くお勧めします。オンライン ブログ、ソーシャル メディア、または Web 開発に焦点を当てたリソースを調べてみるのもよいでしょう。

もし間違いを犯した場合は、おそらくそれをコメントで知らせてください。批判や新しいアイデアは大歓迎ですので、よろしければシェアしてください!