1. The tool

1.devtool

Mainly waterfall serial loading and parallel loading and single loading in each stage of the time

TTFB: indicates the time between the request’s origin and the resource’s return, background response, or network lag

Contentdownload: Download resource time

Queueing: The time for a browser to initiate a request with a priority

Some SSL; It is the HTTPS security authentication time, init Connection time, and the time when a domain name is transferred to an IP address

Some waterfall requests are asynchronous and some are synchronous and may block subsequent requests, so we try to synchronize as much as possible

2.lighthouse

The page load time is red and the first rendering is firstContentPaint speedIndex<4s and also focuses on the first time the user can interact

3.performance:

It depends on the execution of various functions in the main thread and updates to dom load time and JS load time what function is blocking the load DCL is the time when the DOM is fully loaded

4. RAIL evaluation

Response: within 50ms

Animation: 60 frames per 10ms frame, i.e. 1s

Idle: Increases the idle time of the main thread of the browser

Load: All contents can be loaded and interactive within 5s

5.webpagetest

Request waterfall diagram

The first request return time for the first and second access and the first element time for the page

The time the user can interact without being blocked

6. Tool overview

7.api

 // window.addEventListener('load',(e)=>{
    // //time to InrterActive Time when a user can interact for the first time
    / / let timing = performance. GetEntriesByType (' navigation ') [0] / / a lot of performance is related to the performance on this object to get the browser object
    // // Calculate tti = domInteractive-fetchStart
    // let tti = timing.domInteractive-timing.fetchStart
    // console.log('tti',tti);
    // })
    let event = 'visibilitychange'
    document.addEventListener(event,(e) = >{
        if(document.hidden){
            console.log('They're not looking at our page.');
        }else{
            console.log('The user is looking at our page 1'); }})// PerforMobServer ()// it listens for things like time nodes and blocking events
Copy the code