jquery - DOMContent の起動の遅延

Question

サイトの応答時間を改善しようとしていますが、最後のファイル ロード (3.11 秒) と DOMContent の起動とロード イベント (4.72 秒) の間に遅延があることがわかりました。画像追加。

ヘッドではなくフッターに配置したJS処理が原因のようです。

この遅延を分析してプラグインする方法を知りたいです。

Answer 1

私の2セント

https://developers.google.com/chrome-developer-tools/docs/timeline

そして、DOMContentLoaded および Load イベント マーカーセクションで:

https://developers.google.com/chrome-developer-tools/docs/timeline-images/image28.png タイムラインは、DOMContentLoaded イベントと load イベントがいつディスパッチされたかをそれぞれ示す青と赤の線で各記録に注釈を付けますブラウザによって。DOMContentLoaded イベントは、ページの DOM コンテンツがすべて読み込まれて解析されると発生します。ドキュメントのすべてのリソース (画像や CSS ファイルなど) が完全に読み込まれると、load イベントが発生します。

すべての JavaScript ファイルを 1 つの JavaScript ファイルに連結し、すべての CSS ファイルを 1 つの CSS ファイルに連結する必要があります。また、ファイルを gzip (圧縮) する必要があります。

gruntjs ( nodejsベース) またはApache Ant (Java ベース) を試して、いくつかの自動タック (縮小、圧縮、連結など) を実行します。その他の自動タスクソフトが存在します。