js 监控浏览器性能

查看性能的参数说明:

var t = performance.timing; // 详情参见 performance API

(1). 白屏时间       -> css加载完成时间戳 - t.fetchStart

(2). 首屏/用户可操作时间 -> t.domContentLoadedEventEnd - t.fetchStart

(3). 总下载时间      -> t.domComplete - t.fetchStart

(4). 各阶段耗时

  1. 获取html请求   -> t.responseStart - t.fetchStart
  2. 获取html全部字节 -> t.responseEnd - t.responseStart
  3. 解析初始html节点 -> 最后一个js请求发送时间戳 - t.domLoading
  4. css加载      -> 加载全部css时间
  5. js加载      -> 加载全部js时间
  6. 解析html+下载解析css,js -> t.domContentLoadedEventStart - t.domLoading
  7. js执行(domready中代码) -> t.domContentLoadedEventEnd - t.domContentLoadedEventStart

(5). Ajax

var lastTime = onload事件触发前发送的请求得到响应时间戳;

  1. 加载页面 至 获得请求 -> lastTime - t.fetchStart
  2. 请求耗时 -> lastTime - 发送第一个请求的时间戳
  3. 请求数量 -> onload事件触发前发送的请求数
  4. 使用本地存储 -> onload事件触发前发送的请求,是否包含 useCache:true
posted @   创业男生  阅读(546)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示