web-dev-qa-db-ja.com

レンダリングのブロック遅延と移動スクリプトの下部

下部のスクリプトの移動は、defer属性またはasync属性の使用と同じだと思います。 deferとasyncは完全にレガシーブラウザーに準拠していないため、ページの下部にあるスクリプトの読み込みに取り掛かりました。

<html>
<body>
<!-- whole block of html -->
<script type='text/javascript' src='app.js'></script>
</body>
</html>

これを行う前に、GTmetrixやGoogle PageSpeed Insightなどのパフォーマンスベンチマークツールを実行しました。どちらも主な問題として「レンダリングブロッキング」パラメータを示しました。これらのスクリプトを一番下に移動してcontent/htmlが最初に読み込まれるようにした後でも、今は少し混乱しています。これらのツールは、レンダリングのブロッキングを主な問題として報告しています。

ボトムには 'defer'属性が必要です

いくつか質問があります。

  1. 本当ですか？
  2. これらのツールは特に「defer」または「async」属性を探しますか？
  3. フォールバックw.r.tを延期する必要がある場合（特にIEブラウザーの場合）、IEの非据え置きスクリプトをロードするために条件ステートメントを使用する必要がありますか？

最善のアプローチを提案してください。前もって感謝します。

javascripthtmlperformanceasynchronousrender
23
Robin

  1. はい、サイトの設計と要件で可能な場合は、下部にロードされたスクリプトにもdefere属性が必要です。

  2. いいえ、これらのツールは解析の完了を探します

  3. サポートするIEのバージョンによって異なりますが、推奨事項は異なります。

次に、簡単なscript、defer、asyncについて少し説明し、理由を理解できるようにします。

スクリプトシンプル<script>タグは、スクリプトdownloadおよびexecutesになるまで、その時点で解析を停止します。

Asyncasyncを使用する場合、スクリプトは残りのHTMLコンテンツと並行してダウンロードを続行するため、ダウンロードの解析を停止しません。ただし、スクリプトはexecutionの解析を停止し、その後のみhtmlの解析が続行または完了します

Deferdeferを使用する場合、スクリプトは、ダウンロードまたはスクリプトの実行のためにHTMLデータの解析を停止しません。したがって、Webページの読み込み時間に時間を追加することを避けるための一種の最良の方法です。

遅延はhtmlの解析時間を短縮するのに適していますが、すべてのWebデザインフローで常に最適または適切であるとは限らないので、使用するときは注意してください。

5
Nabeel Khan

asyncの代わりに、おそらくこのようなもの（@ guest271314に感謝）

<!DOCTYPE html>
<html>
<body>
<!-- whole block of  html -->

<!-- inline scripts can't have async -->
<script type='text/javascript'>
function addScript(url){
document.open();
document.write("<scrip" + "t src = \"" + url + "\"></scr" + "ipt>");//weird quotes to avoid confusing the HTML parser
document.close();
}
//add your app.js last to ensure all libraries are loaded
addScript("jquery.js");
addScript("lodash.js");
addScript("app.js");
</script>
</body>
</html>

これでよろしいですか？必要に応じて、document.write呼び出しにasyncまたはdefer属性を追加できます。

2
programmer5000

最後に述べたスクリプトにdefer属性が必要なのはなぜですか？

答えは、最後のスクリプトに遅延を追加することにより、ページが描画される前にロードする必要のある重要なリソースの数を実際に減らし、重要なレンダリングパスを減らすことです。

はい、最後のDOMが解析されるまでは正しいですが、ブラウザーはまだDOMの描画を開始していないため、ペイントとレンダリングのアクティビティが完了するまでdomContentLoadedEventはブロックされます。

Async/deferを追加することで、リソースがレンダリングに重要ではなく、domコンテンツが読み込まれた後に読み込んで実行できることをブラウザーに伝えています。これにより、domContentLoadedイベントがより早くトリガーされ、domContentLoadedイベントが発生するのが早ければ早いほど、他のアプリケーションロジックの実行が早くなります。

下のグーグルリンクを参照して、コンセプトを明確に示してください。 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

0
Novice

HTML仕様1.1によると、HTMLページのスクリプトブロックは、URLのJavaScriptファイルがダウンロードされて処理されるまで、ページのレンダリングをブロックします。

ページの最後にスクリプトを追加する：ブラウザーがページのレンダリングを続行できるようにするため、ユーザーはページのレンダリングをできるだけ早く見ることができます。

[推奨]スクリプトタグに遅延を追加：スクリプトにdocument.writeまたはドキュメント変更コードが含まれていないことをブラウザに約束し、それにより許可レンダリングを続行します。

前のスレッドがあなたに役立つかもしれないので

「defer」属性を使用する場合、ページの下部にスクリプトを配置する必要がありますか？

0
Chennai Coder