1.工具
1.devtool
主要是瀑布 串行加载和并行加载 以及单个加载在各阶段花费的时间
ttfb:表示这个请求发起到资源回来的时间,后台响应或者网络卡顿
contentdownload:下载资源时间
queueing:浏览器发起请求有优先级 请求发起的等待时间
还有一些ssl;是https安全验证时间,以及连接建立时间(init connection),域名转ip的时间
瀑布流有些请求时异步的,有些时同步的可能会阻塞后面的请求,所以我们尽量同步
2.lighthouse
页面加载时间为红线,首次渲染为firstcontentpaint speedIndex<4s 同时关注用户首次可交互的时间
3.performance:
主要看主线程的各种函数执行和dom加载时间和js加载时间的更新 是什么函数阻塞了加载 dcl就是dom加载完全的时间
4.RAIL评估
响应(response):50ms以内
动画(animation):每10ms帧 即1s有60帧动画
空闲(idle):增加浏览器主线程的空闲时间
加载(load):5s内完成所有内容的加载且可以交互
5.webpagetest
请求瀑布图
首次访问和第二次访问的第一个请求回来时间和页面有第一个元素时间
用户可以交互的时间 没有被阻塞的时间
6.工具概览
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()//可以监听一些东西 比如时间节点和阻塞事件