当前位置：网站首页>White screen time, first screen time

White screen time, first screen time

2022-06-11 10:39:00 【Front end students】

White screen time

The time when the browser displays the first character or element
Insert picture description here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> hang </title>
  <script type="text/javascript">
    //  Are not compatible performance.timing  Browser , Such as IE8
    window.pageStartTime = Date.now();
  </script>
  <!--  page  CSS  resources  -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    //  White screen time end point 
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!--  The page content  -->
</body>
</html>

You can use Performance API when

White screen time = firstPaint - performance.timing.navigationStart;

You can use Performance API when

White screen time = firstPaint - pageStartTime;

First screen time

The first screen time is when the user opens the website , The time until the first screen of the browser is rendered ,dom At a relatively stable stage .
For the user experience , The first screen time is an important factor for users to experience a website . Usually a website , If the first screen time is 5 Seconds or less is excellent ,10 Within seconds is acceptable ,10 Seconds or more is intolerable . exceed 10 Seconds of the first screen time, the user will choose to refresh the page or leave immediately .
Insert picture description here
stay SSR（ Server rendering ） The application of , We think html Of body The rendering time is the first screen time . We usually use W3C The standard Performance Object to calculate the first screen time .

Performance Often used to collect performance data , Because the object has built-in performance parameters for almost all common front ends .

But as the Vue and React And so on, the front-end box prevails , Lead to Performance Unable to accurately monitor the first screen time of the page . Because the page body It's empty , The browser needs to load js, And then through js To render the content of the page . So what data do we use as the first screen time ？

In a word , Namely SSR Use Dom When the rendering ends ,SPA Project use FMP Time for .

原网站

版权声明
本文为[Front end students]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206111029188888.html