<! DOCTYPEhtml>
<html lang="en">

<head>
    <script>
        const startTime = new Date(a)</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script>
        const endTime = new Date(a)console.log(White screen time 1:, endTime.valueOf() - startTime.valueOf())
        console.log('White screen time 2:', endTime - window.performance.timing.navigationStart)
    </script>
</head>

<body>
    <p>White screen time: from the address bar Enter to the page display</p>
    <p>First screen time: from the address bar Enter to the time when the first screen page is displayed without scrolling (instead of content, or some elements are not displayed)</p>
    <script>
        If the page height is large and the display height is high, insert this script at the first screen line of the page and do not consider the rendering tree -> display time
        // If the page asynchronously requests data, or images, add the slowest image request time and asynchronous interface request return time
        const firstScreenTime = new Date(a)console.log('First Screen Time 1:', firstScreenTime.valueOf() - startTime.valueOf())
        console.log('First Screen Time 2:', firstScreenTime - window.performance.timing.navigationStart)
    </script>
</body>

</html>
Copy the code

. Image from Internet