以chrome为例,开发者模式中跟页面加载时间相关的是network面板。 network 面板的 DOMContentLoaded 和load 打开Network 面板后,刷新页面,面板底部有这三个时间:
finish:页面最后一个请求截止的时间,如果页面加载完成后,触发了ajax请求,那么该时间会变更。 DOMContentLoaded:dom内容加载并解析完成的时间,即页面白屏时间 load:页面所有的资源(图片、音频、视频等)加载完成的时间。
当页面的初始的标记被解析完成时,会触发DOMContentLoaded ,它在Network 面板上的两个位置显示: 当页面完全加载时触发load 事件,它显示在三个地方: 查看网络时序点击Timing 选项卡可以查看单个资源的请求生命周期的明细分类。 资源加载时序所有网络请求都被视为资源,当它们通过网络检索时,分为不同的生命周期。 一个完整请求生命周期的主要阶段如下Redirect 重定向 App Cache 应用程序缓存 DNS TCP Request 请求 Response 响应 responeseStart 记录最开始的响应时间
responseEnd 记录响应结束时间
timing面板信息详解Queuing 排队 如果一个请求排队,则表明: 请求被渲染引擎推迟,因为它比关键资源(如脚本/样式)的优先级低。例如,images。 这个请求被搁置,在等待一个即将被释放的不可用的TCP socket 这个请求被搁置,因为浏览器限制。在HTTP 1协议中,每个源上只能有6个TCP连接。 正在生成磁盘缓存条目(通常非常快)
Stalled/Blocking 停止/阻塞 Proxy Negotiation 代理协商 DNS Lookup DNS查找 Initial Connection/Connecting 初始连接/连接 SSL Request Sent/Sending 请求已经发送/正在发送 Waiting(TTFB) 等待 Content Download/Downloading 内容下载/下载
Network面板诊断网络问题排队或者阻塞:很多个请求队列被阻塞。这表示单个客户端检索的资源太多。在HTTP 1.0/1.1连接协议中,Chrome限制每个域名最多执行6个TCP连接。 接收到第一个字节的时间很慢:很多绿色。 加载缓慢:很多蓝色。
参考: https://www./doc/chrome-devtools/network-performance/resource-loading/ https://www.jianshu.com/p/24b93b13e5a9
|