zoukankan      html  css  js  c++  java
  • 前端性能监控-window.performance.timing篇

    最近发现浏览器内置对象里有个好东西,window.performance。这里面包含着浏览器性能相关的各种数据,然后其中的timing属性,就是所有阶段的用时统计,从这一点我们就可以简单的从浏览器运行时间上进行分析。

    function getsec(time) {
          return time / 1000 + 's'
    }
    window.onload = function () {
          var per = window.performance.timing;
          console.log('DNS查询耗时' + getsec(per.domainLookupEnd - per.domainLookupStart))
          console.log('TCP链接耗时' + getsec(per.connectEnd - per.connectStart))
          console.log('request请求响应耗时' + getsec(per.responseEnd - per.responseStart))
          console.log('dom渲染耗时' + getsec(per.domComplete - per.domInteractive))
         //  console.log('白屏时间' + getsec(firstPaint - pageStartTime))
          console.log('domready可操作时间' + getsec(per.domContentLoadedEventEnd - per.fetchStart))
        }

    运行结果如下

     通过这种时间分析则可以看出当前页面的时间是花在什么地方,对我们做性能优化就有一个方向性的指导作用。

  • 相关阅读:
    Linux 忘记root密码
    Linux 基础命令
    Linux 运行级别
    Oracle 体系结构
    Oracle 数据库启动过程
    数据库设计范式
    Oracle通过ROWID删除表中重复记录
    JACASCRIPT--的奇技技巧的44招
    css 的小细节,小总结
    关于我们DOM的知识点
  • 原文地址:https://www.cnblogs.com/LeoXnote/p/13127551.html
Copyright © 2011-2022 走看看