ブラウザのロードイベントの理解

ブラウザは、Web開発者のための非常に興味深い遊び場です.今日は、すべてのマークアップ、スタイルシート、JavaScriptが正しくロードされ、取得するデータが正しく行われていることを確認するために、ブラウザロードイベントを正しく使用する方法についてお話します.
我々がそれに入る前に.Web開発者(大部分はフロントエンド開発者)にとって、ブラウザがどのように書いたコードを解析しているかを理解するのはとても重要だと言いたい.そのために、私は非常に良い記事をリンクしています.
HTMLとCSSは両方ともオブジェクトモデルを持っています.HTMLのそれをDOMと呼ぶDocument Object Model ) CSSはCSSオブジェクトモデルです.我々の焦点であるDOMは、ノード/要素を抑制している木のような構造です.ここでは、HTML要素はすべて解析され、順番にレンダリングされます.これはスタイルシートとJavaScriptコードを追加します.しかし、時々、あなたのHTMLとCSSがあなたのアニメーション、フェッチされたデータとManymoreを含むためにレンダリングされている間、あなたはJavaScriptコードを走らせたいです.
さあ行きましょう
ブラウザがHTMLとCSSコードを解析するときに終了しました.イベントが起動されます.このイベントはDomContentLoadedであることを知らせてください.通常は以下のようにします.

window.addEventListener("DOMContentLoaded", doSomethingCool());

このイベントは、ページ構造とスタイルが読み込まれた後に何かをしたいときに特に便利です.

Note that event though the DOMContentLoaded event may be triggered, other stuff like images, audio or even video might have not yet loaded.

ブラウザによって引き起こされる別のイベントはLoadイベントです.あなたはこの方法を使用します.

window.addEventListener("load", doAnotherCoolThing());

DomContentLoadedとは異なり、すべてのマークアップ、スタイルシート、JavaScript、および画像やオーディオのようなすべての静的資産が読み込まれたときにこのイベントが発生します.
これで、ブラウザで使用できる2つの主要なロードイベントを知っています.
今、あなたは私自身に尋ねるかもしれません:私が私のページのボディーの前に私のJavaScriptを置かれるならば、どうですか?または他のすべての前に来る?
このためには、defer 属性は、マークアップとスタイルシートの後にJavaScript負荷を作成します.

<script src="https://example.com/some-javascript.js" defer></script>

Asyncメソッドに読み込まれる必要がある場合は、JavaScriptのタグにAsync属性を使用できます.

<script src="https://example.com/some-javascript.js" async></script>

この投稿は簡単で、XDであることを願っていました.
詳細については、すべての詳細を理解するページについては、この記事をお読みください