私は、サーバーから最初のボディが返された後、ページの負荷パフォーマンスを測定し記録することに興味があります。言い換えれば、ブラウザがHTMLを持っていれば、すべての画像を読み込み、ページ上でCSSとJavaScriptを読み込み、最初のjquery readyブロックのレンダリングと実行を終了します。フロントエンドWebページパフォーマンステスト
これについてパフォーマンステストを実行する最良の方法は何ですか？私が読んだことのほとんどは、サーバーの応答とデータのダウンロードに集中する傾向があります。しかし、ユーザーが待っている時間の大部分はこの後です。自動化された方法でこれを手助けするものはありますか？
Chromeには、開発者ツールに組み込まれたプロファイラがあります。 PCの場合はCTRL+SHIFT+I、Macの場合はCmd+option+Jです。
jQueryでは、ウィンドウが読み込まれる前にDOMの準備ができます。だから、このようなものは、あなたのDOMのロードと資産負荷の間のデルタを教えてください：
// When the DOM is loaded
$(function(){
console.log('Start ' + new Date().getTime());
});
// When all the images are loaded
$(window).load(function(){
console.log('End ' + new Date().getTime());
});
JavaScriptの時間精度には注意してください：http://ejohn.org/blog/accuracy-of-javascript-time/ – Brad
タイムスタンプ自体を取得したり、次の15msのキューまで待つことから、紛失したり、誤って計算されたりするのは、私の意見ではごくわずかです。ページの負荷が100ミリ秒以下になるようにベンチマークを行う場合は、決してROIを得ることはできません。 – AlienWebguy
もちろん、それはすべて正確にプロファイルしようとしているものによって決まります。それが私がそれを指摘した理由です。私は、人々が各繰り返しで何かを試して、そのデータがどこにあるのか疑問に思う多くのケースを見てきました。 JavaScriptで時間を比較すると、より大きな画像だけを見ることができます。 – Brad
フロントエンドのパフォーマンスを監視するためのツールへのWebパフォーマンス最適化（WPO）業界GoはWebPagetestです。これは、ウェブブラウザの各アセットがどのように読み込まれ、どこに問題があるかを示すウォーターフォールグラフを含むウェブページの全負荷を非常に詳細に分析します。また、主要なブラウザイベント、フィルムストリップ、ビデオのスクリーンショットを取得します。これは本当に素晴らしいオープンソースツールであり、主導的な開発者はGoogleによって採用されています。
WebPagetestはしかし、自動化ソリューションではありません。 SpeedCurveはWebPagetestの上で実行される商用サービスで、テストプロセスを自動化してフロントエンドのパフォーマンスを監視します。また、あなたのウェブサイトを競合他社と比較してベンチマークし、ウェブサイト構築の問題を警告します。免責事項：私はSpeedCurveの作成者です。
あなたはSpeedCurveの作成者ですか？ –
あなたは、ユーザーがリアルタイムであなたのサイトやウェブアプリを経験しているかの明確な像を提供し、実際のユーザーの監視サービスを以下試すことができます。
あなたはユーザアクティビティを自動化する必要がありますか？または、ページをレンダリングするクライアント側の時間を測定するだけですか？ – Brad
'負荷テスト'は 'ウェブページの読み込み時間のパフォーマンス'と同じではありません...ただ、タイトルが混乱していると言っています... – yoosiba
申し訳ありませんが、あなたは正しいです。私は「ページロード」が「サーバーロード」ではないと考えていました。 – chrishomer