パフォーマンスの高い JavaScript イベントを作成するためのテクニック

効率的な Web フロントエンド プログラムをどうやって作るかは、私がフロントエンド開発を行うたびに無意識に考える問題です。数年前、Yahoo の優秀なフロントエンド エンジニアが Web フロントエンドのパフォーマンス向上に関する本を出版し、Web 開発テクノロジ コミュニティ全体にセンセーションを巻き起こしました。この謎の Web フロントエンド最適化問題は、Web 上で一般的な問題となりました。業界全体が衝撃的な秘密の答えを知ったとき、Web フロントエンドの最適化は、開発する Web サイトに質的な飛躍をもたらすことができなくなります。私たちが開発する Web サイトのパフォーマンスを他の Web サイトよりも向上させる 私たちの Web サイトをより良くするには、より深く独立して考え、より優れたスキルを確保する必要があります。

Javascriptのイベントシステムが最初に思い浮かぶブレークスルーポイントです。なぜ JavaScript イベント システムなのか? Web フロントエンドには html、css、javascript という 3 つのテクノロジーが含まれていることは誰もが知っています。html と css がどのように組み合わされるかは非常に明確です。これについてはあまり説明できませんが、どのように組み合わされるのかは明らかです。 JavaScript は html と css の間に入るのですが、この 3 つを統合してみてはどうでしょうか?最後に、このエントリポイントは JavaScript のイベント システムであることがわかり、どんなに長く複雑な JavaScript コードを書いても、最終的にはイベント システムを介して HTML や CSS に反映されるということがわかりました。が 3 つのポイントを統合するためのエントリ ポイントである場合、特に今日のますます複雑化している Web ページでは、ページ内に必然的に多数のイベント操作が存在することになります。これらのイベントがなければ、慎重に作成された JavaScript コードは にのみ保存されます。データベースを削除すると、主人公は役に立たなくなります。ページ上には多数のイベント関数が存在することになるため、習慣に従ってイベント関数を作成した場合、効率に影響を与える問題はありますか?私が調べた答えは、これは実際には効率の問題であり、深刻な効率の問題であるということです。

私の答えをわかりやすく説明するには、まずJavaScriptのイベントシステムについて詳しく説明する必要があります。

イベント システムは、JavaScript、HTML、CSS の統合のエントリ ポイントです。このエントリ ポイントは、Java の main 関数のようなものです。では、すべての魔法はここから始まります。合計3つの方法を調べました。

方法: htmlイベント処理

HTMLイベント処理は、htmlタグ内にイベント関数を直接記述する方法です。 この記述方法はhtmlタグと密接に結合しているため、 HTMLイベントハンドリングと呼ばれます。たとえば、次のコード: