码迷,mamicode.com
首页 > Windows程序 > 详细

前端性能监控-window.performance.timing篇

时间:2020-06-14 23:30:28      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:性能优化   main   turn   eve   src   页面   div   active   upstart   

最近发现浏览器内置对象里有个好东西,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))
    }

运行结果如下

技术图片

 

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

 

前端性能监控-window.performance.timing篇

标签:性能优化   main   turn   eve   src   页面   div   active   upstart   

原文地址:https://www.cnblogs.com/LeoXnote/p/13127551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!