JS毎日の問題:先端性能モニタはどのようなデータを監視しますか?どうしますか

20190318号
先端性能モニタはどのデータを監視しますか?どうしますか
始まる前にホームページの性能をチェックする住所を二つ紹介します.

https://developers.google.com...

https://www.webpagetest.org/

なぜ性能監視をしますか?
会社にとって、性能はある程度利益と直接関係があります.
なぜ性能が会社の収益に影響するのですか?根本的な原因はやはり性能がユーザー体験に影響を与えたからです.ロードの遅延、操作のカートンなどはユーザーの使用体験に影響します.特にモバイル端末では、ユーザのページ応答の遅れと接続の中断の許容度が低い.携帯を持ってウェブページを開けて、ある情報を見たいのに半日の気持ちを込めて、直接に別のページから離れることを選ぶかもしれません.Googleもページのロード速度をSEOの重みとしています.
どのような点が監視カメラが必要ですか?
私たちは以下の点に分けて監視します.

ホワイトスクリーン時間

首のスクリーン時間

ユーザの操作可能時間

総ダウンロード時間

ホワイトスクリーン時間
ホワイトスクリーンの時間はユーザが初めてコンテンツを見た時間で、初めてレンダリングする時間とも言われています.chromeの高いバージョンはfirstPaintTimeインターフェースでこの時間を取得しますが、ほとんどのブラウザはサポートしていません.他の方法で監視してください.WebPagetestビューをよく観察してみると、ホワイトスクリーンの時間はヘッドチェーンのリソースロードが完了した近くに現れています.ブラウザはヘッドリソースをロードして解析してからこそ、本当にページをレンダリングすることができます.これに基づいて、ヘッドリソースのロードが完了した時点を取得することで、ホワイトスクリーン時間の統計を近似することができます.
コードの理解

    
        
    
      var start_time = +new Date; //      ，        
    
      
    
      var end_time = +new Date; //    
      var headtime = end_time - start_time; //            
      console.log(headtime);
    

最初のスクリーン時間
最初のスクリーン時間の統計は複雑です.写真などの要素や非同期レンダリングなどが含まれています.ロードビューを観察すると、画面の主な要因に影響する画像のロードが確認されます.最初の画面内の画像のロード時間を統計することによって、最初のスクリーンレンダリングが完了した時間が得られます.統計の流れは以下の通りです

       API      -> 
           load    ->                 ，          ->
    

操作可能時間
ユーザはデフォルトでは、通常この時点でイベントをバインディングして動作するので、domready時間を統計することができる.モジュール化非同期ローディングを使用したJSは、コードの中で重要なJSのローディング時間を自動的にマークすることができます.これも製品指標の統計方式です.
ダウンロード時間
総ダウンロード時間はデフォルトではOload時間を統計できます.このようにして、同時ローディングのリソースが全部ロードされた時間を統計できます.ページに非同期レンダリングがたくさんある場合、非同期レンダリングが完了した時間を総ダウンロード時間として描画できます.
締め括りをつける

ホワイトスクリーン時間は、ヘッド内のリソースのロードが完了した

を指します.

ヘッドスクリーン時間は、視認エリア内の最後の画像のロードが完了した時間

を指します.

操作可能時間とは、Dcument.onready時間

をいう.

総ダウンロード時間とは、Dcument.onload時間

のことです.
JSについて毎日書きます.
JS毎日の問題は音声問題コミュニティとして見られます.毎日、欠片時間を利用して60秒以内の音声形式で当日の試験問題を完成します.群主は翌日の0時に当日の参考答案を押して送ります.

注は当日の任務を完成するだけではなくて、もっと多いのは漏れを調べて補充するので、学習グループ内のその他の学友の優秀な解答の構想

クリックしてクイズに参加します