Web ページを高速化する

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

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

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

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

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

なぜ？

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

私は最近、挑戦と学習経験として、依存関係のない 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 開発に焦点を当てたリソースを見て回ってください。

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

以上がWeb ページを高速化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。