13

Webkit ベースのブラウザーの特定のビルドをベンチマークできるようにする必要があり、DOM 操作、メモリ制限などの特定の処理にかかる時間を測定しています。

以下のテストでは、10 個のかなり重い PNG グラフィックを同時にロードするのにかかる時間を記録しています。コードでは、読み込みが完了するまでの時間を計測できる必要があります。動的な Image オブジェクトに onLoad 関数を設定して、ミリ秒単位の時間を生成しようとしました。ただし、下のキャップに示されているように、負荷のデータ転送部分のみを記録しているため、読み取り値がごくわずかであり、データ転送時にかなりの (3000 + ms) 遅延があるため、不正確な読み取り値が示されています。画像は表示可能です -青でループしています。これはブラウザのリフロー サイクルです。

これをベンチマークできるように、ブラウザーがリフローを終了したときに記録するために使用できる Webkit のイベントはありますか? 私がテストしている Webkit のビルドには開発者ツールがないため、時間をミリ秒単位でコードに記録できる必要があります。Chrome では違いを確認できますが、2 つのビルドのパフォーマンスは大幅に異なるため、比較のために正確に数値化する必要があります。

画像ベンチマーク

4

2 に答える 2

1

また、CSSストレステストもご覧ください。ブックマークレットは、ページのパフォーマンステストに最適です。http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

PNGをdivとして設定し、ストレステストを実行するのはどうですかbackground-image。画像をタイミングを合わせて複数回有効/無効にする必要があります。

于 2012-08-29T19:57:27.323 に答える
1

jQuery を使用している場合は、ドキュメントの準備ができてからウィンドウが読み込まれるまでの時間を記録してみると、概算がわかります。

(function(){
    var start, end;

    $(document).ready(function(){
         start = new Date()    
    });
    $(window).load(function(){
         end = new Date();
         console.log(end.getTime() - start.getTime());
    });

}());

編集：

Browserscope リフロー タイマーをご覧になりましたか? 基本的には、dom に変更が加えられた後、ブラウザーが制御を JavaScript エンジンに戻すまでにかかる時間をチェックします。このページによると、個人的にはテストしていませんが、どのブラウザでも動作するはずです。おそらく、テスト中に実行されるコードを、ページのリフローのタイミングに合わせることができます。

于 2012-05-28T16:01:02.193 に答える