前端性能优化-工具篇

274 阅读1分钟

1.工具

1.devtool

主要是瀑布 串行加载和并行加载 以及单个加载在各阶段花费的时间

image-20210526095832892

image-20210526100339096

ttfb:表示这个请求发起到资源回来的时间,后台响应或者网络卡顿

contentdownload:下载资源时间

queueing:浏览器发起请求有优先级 请求发起的等待时间

还有一些ssl;是https安全验证时间,以及连接建立时间(init connection),域名转ip的时间

image-20210526101456782

瀑布流有些请求时异步的,有些时同步的可能会阻塞后面的请求,所以我们尽量同步

2.lighthouse

image-20210526100616401

image-20210526100155240

页面加载时间为红线,首次渲染为firstcontentpaint speedIndex<4s 同时关注用户首次可交互的时间

3.performance:

主要看主线程的各种函数执行和dom加载时间和js加载时间的更新 是什么函数阻塞了加载 dcl就是dom加载完全的时间

image-20210526114258525

4.RAIL评估

响应(response):50ms以内

动画(animation):每10ms帧 即1s有60帧动画

空闲(idle):增加浏览器主线程的空闲时间

加载(load):5s内完成所有内容的加载且可以交互

5.webpagetest

请求瀑布图

首次访问和第二次访问的第一个请求回来时间和页面有第一个元素时间

用户可以交互的时间 没有被阻塞的时间

6.工具概览

image-20210526110611211

7.api

 // window.addEventListener('load',(e)=>{
    //     //time to inrteractive 用户首次可交互时间
    //     let timing = performance.getEntriesByType('navigation')[0] //很多性能有关的都是performance这个对象上 拿到浏览器对象
    //     //计算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('用户没看我们页面');
        }else{
            console.log('用户正在看我们页面1');
        }
    })
//performobserver()//可以监听一些东西 比如时间节点和阻塞事件