4

大規模な Web サイトのさまざまなパフォーマンス調整をテストしており、最初の読み込みからドキュメント要素が表示されるまでにかかる時間 (つまり、描画にかかる時間) を定量化する必要があります。Chrome の開発プロファイラーを使用してこれを行う良い方法はありますか?

明確にするために、ロードからペイントされたページまでの合計時間を知る必要があります。

4

3 に答える 3

2

次の 2 つのいずれかを実行できます。1) Dan Mayor の方法を使用します。ペイント スクリプトの前後を単純に使用new Date().getTimeして、それらを差し引いて、スクリプトが完了するまでにかかった時間を調べることができます。ただし、コード全体が遅れる場合、これは遅れる可能性があります。これは必ずしも最も正確な方法ではありませんが、仕事は完了します。(ただし、他のスクリプトとは独立して時間を計算する別の関数を作成することもできます。以下を参照してください:)

function findTime(done){
if (done==false){var time1 = new Date.getTime();}
if (done==true) {var time2 = new Date.getTime(); window.alert(time2-time1);}
}

は、スクリプトの完了後に追加するブール値のパラメーターdoneです。

2) Chrome には、タイムライン機能を備えた優れた開発者用コンソールがあります。基本的には、Chrome ブラウザを開き、command+Shift+C (Windows の場合は control+shift+C) を押して、タイムライン ボタンをクリックします。次に、コンソールの下部にある小さなドットをクリックすると、赤に変わります。ページを更新すると、タイムラインがスクリプトのあらゆる種類のタイミング データの収集を開始します。塗装イベントは緑色で表示されます。残念ながら、これはサードパーティのソリューションです。

最終的に、ラグの量、インターネット接続速度、プロセッサ速度などが異なるため、この時間を直接測定する方法はありません。ただし、これら 2 つの方法は実際の答えにかなり近くなります。さまざまなブラウザーやコンピューターでスクリプトをテストすることをお勧めします。

于 2012-12-27T19:18:26.990 に答える
0

手始めに、Firebug の「ネット パネル」に慣れる必要があります。

Chrome にも同様のツールがあることは理解しています。「F12」を押します (または「レンチ」アイコンを使用します)。

于 2012-12-27T02:58:06.637 に答える
0

「DOMContentLoaded」イベントを調べることをお勧めします。これは、jQuery がバインドして .ready() メソッドを提供するものです。基本的な考え方は、Date.getTime() を使用してミリ秒の値を記録することです。最初の値はドキュメントの最後の行にする必要があります (html ダウンロード マーカーの場合)。onload、DOMContentLoaded、loaded、およびその他の DOM 準備完了状態イベントの後に呼び出す秒。

簡単な例 (html 出力の終わり):

<script type="text/javascript">
    window.downloadComplete = new Date().getTime();
    document.onload = function() { window.domParseComplete = new Date().getTime(); }
    window.onload = function { window.renderComplete = new Date().getTime(); }
    window.paintTime = window.renderComplete - window.downloadComplete;
</script>

この例では、window.downloadComplete は DOM のダウンロードが完了したときのミリ秒、window.domParseComplete は DOM が解析されたときのミリ秒、window.renderComplete はウィンドウがレンダリングの完了を報告したときのミリ秒です。window.paintTime は、これらのミリ秒時間から計算されたミリ秒数です。

于 2012-12-27T03:08:29.647 に答える