HTML5 的 performance timing API 统计了一个浏览器窗口从卸载当前页面开始到加载完毕目标页面的整个流程中,每个节点的时间戳 通过这些节点的时间戳,我们可以计算出很多有用的信息 例如 DNS 查询耗时 TCP连接耗时 request请求耗时 解析dom树耗时 …… 在GitHub上找到一个很实用的JS代码,统计出了各项耗时数据 地址是:https://github.com/CraryPrimitiveMan/performance-tool 下面列出其中的各项数据计算方式 准备新页面时间耗时 timing.fetchStart - timing.navigationStart redirect 重定向耗时 timing.redirectEnd - timing.redirectStart Appcache 耗时 timing.domainLookupStart - timing.fetchStart unload 卸载之前网页耗时 timing.unloadEventEnd - timing.unloadEventStart DNS 查询耗时 timing.domainLookupEnd - timing.domainLookupStart TCP连接耗时 timing.connectEnd - timing.connectStart request请求耗时 timing.responseEnd - timing.requestStart 请求完毕至DOM加载 timing.domInteractive - timing.responseEnd 解析dom树耗时 timing.domComplete - timing.domInteractive load事件耗时 timing.loadEventEnd - timing.loadEventStart; 从开始至load总耗时
timing.loadEventEnd - timing.navigationStart
本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒
原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。
原始发表时间:2015-11-26
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句