7

There are two events related to web page initialization of browser.

  • DOMContentReady(document object) : HTML document was parsed and DOM tree was constructed
  • load(window object) : All element of HTML document were rendered(displayed)

In my understanding, browser can't start rendering page before DOM is ready(DOMContentReady is fired) and by default script tag blocks any other browser process until script file is downloaded and executed.

Then why is it good to put script tag in the end of body tag? In my opinion, browser will be blocked when it meets script tag in any position of the page, so DOMContentReady will not be fired until script tag is downloaded and executed. As a result, user can't see anything except white blank page until script is fully processed regardless of position of script tag.

4

1 に答える 1

8

最新のブラウザーは、ページをダウンロードし、要素とコンテンツが到着すると処理することで機能します。ブラウザがスクリプト要素に遭遇すると、それらが表示される順序でダウンロードされ、それらのスクリプトが最初に存在する必要がある場合に備えて、それらのスクリプトがダウンロードされるまで、それ以上のコンテンツのレンダリングを回避します。これはブロック操作であり、画像への参照などとは異なります。

つまり、スクリプト要素が本文の先頭またはヘッダーにある場合、ブラウザは本文のコンテンツが表示される前にそれらをダウンロードする必要があります。ユーザーは、空白の画面を見て、何が起こっているのか疑問に思い、何かが機能しているのかどうか疑問に思うかもしれません。Web ユーザーは、サイトが読み込まれないと結論付けるまでに数秒 (約 10 秒) 待つだけの傾向があります。

この状況を解決するには、次の 2 つのツールのいずれか (または両方) を使用します。

  • ページのすべてのコンテンツの後、本文の最後に script 要素を配置します。これは、ページ全体が利用可能になるとすぐに表示され、スクリプトがダウンロードされて機能することを意味します。
  • HTML5 以降、スクリプトをasync :としてマークできます<script src="..." async></script>。これにより、スクリプトが解決されるのを待たずにページのダウンロードとレンダリングを続行しながら、バックグラウンドでスクリプトをダウンロードするようブラウザに指示します。

私の理解では、ブラウザーは DOM の準備が整う前にページのレンダリングを開始できません (...)。その結果、script タグの位置に関係なく、スクリプトが完全に処理されるまで、ユーザーは白い空白のページ以外は何も見ることができません。

そうではありません。最新のブラウザーは、ユーザーに何かを見てもらうために、ダウンロード中であっても部分的に読み込まれたページのコンテンツを表示することがよくあります。つまり、低速の接続で 10,000 語のエッセイをダウンロードしている場合、ページの残りの部分が読み込まれている間に、少なくとも最初の数段落から始めることができます。

于 2013-06-17T04:28:59.313 に答える