window.onload = function(){    
  setTimeout(function(){

    let t = performance.timing

    console.log('DNS查询耗时 :' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))

    console.log('TCP链接耗时 :' + (t.connectEnd - t.connectStart).toFixed(0))

    console.log('request请求耗时 :' + (t.responseEnd - t.responseStart).toFixed(0))

    console.log('解析dom树耗时 :' + (t.domComplete - t.domInteractive).toFixed(0))

    console.log('白屏时间 :' + (t.responseStart - t.navigationStart).toFixed(0))

    console.log('domready时间 :' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))

    console.log('onload时间 :' + (t.loadEventEnd - t.navigationStart).toFixed(0))

    if(t = performance.memory){

      console.log('js内存使用占比 :' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')

    }

  })
}

performance.timing:利用performance.timing进行性能分析的更多相关文章

  1. 【转载】利用window.performance.timing进行性能分析

    利用window.performance.timing进行性能分析   性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备 ...

  2. 利用Navigation Timing测量页面加载时间

    最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下 ...

  3. JVM 利用 VisualVM 对高并发项目进行性能分析(转)

    出处:  深入理解 Java 虚拟机-如何利用 VisualVM 对高并发项目进行性能分析 前面在学习JVM的知识的时候,一般都需要利用相关参数进行分析,而分析一般都需要用到一些分析的工具,因为一般使 ...

  4. 深入理解Java虚拟机-如何利用VisualVM对高并发项目进行性能分析

    前面在学习JVM的知识的时候,一般都需要利用相关参数进行分析,而分析一般都需要用到一些分析的工具,因为一般使用IDEA,而VisualVM对于IDEA也不错,所以就选择VisualVM来分析JVM性能 ...

  5. 用 dotTrace 进行性能分析时,各种不同性能分析选项的含义和用途

    对 .NET 程序进行性能分析,dotTrace 能应对绝大多数的场景.在开启一个进程进行性能分析之前,我们会看到一些性能分析选项(Profiler Options).本文将介绍这几个选项的含义,并用 ...

  6. Linux下用火焰图进行性能分析【转】

    转自:https://blog.csdn.net/gatieme/article/details/78885908 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  7. 【转贴】使用sar进行性能分析

    使用sar进行性能分析 https://www.cnblogs.com/bangerlee/articles/2545747.html 很早之前就看过 但是自己一直没用过.. 2012-06-12 0 ...

  8. 使用VisualVM进行性能分析及调优(转)

    VisualVM 是一款免费的\集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃圾回 ...

  9. 【Java VisualVM】使用 VisualVM 进行性能分析及调优

    转载:https://blog.csdn.net/lmb55/article/details/79267277 一.概述 开发大型 Java 应用程序的过程中难免遇到内存泄露.性能瓶颈等问题,比如文件 ...

  10. 转:使用 VisualVM 进行性能分析及调优

    使用 VisualVM 进行性能分析及调优 VisualVM 是一款免费的\集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括 ...

随机推荐

  1. js_for循环的错误

    本段代码实现的效果是遍历数组中的每个元素,给每个元素插入一个类名 for (var i = 0; i < dropdownLi.length; i++) { if(i == 1){ contin ...

  2. Windows SSH 免密登陆远程计算机

    上传公钥 如果远程计算机是类 Unix 系统,使用下面这条命令: Get-Content $Env:USERPROFILE\.ssh\id_rsa.pub | ssh USER@HOST " ...

  3. C语言指针进阶

    目录 字符指针 指针数组 数组指针 数组指针的定义 &数组名VS数组名 数组指针的使用 数组参数.指针参数 一维数组传参 二维数组传参 一级指针传参 二级指针传参 一级指针 二级指针 数组指针 ...

  4. 图穷匕见-所有反DDD模式都是垃圾

    本文书接上回<主观与客观,破除DDD凭经验魔咒>,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新: DDD框架源码(.NET.Java双平台): 加群畅聊,建模分析.技术实现交流: ...

  5. echarts实现pie自定义标签

    echarts实现pie自定义标签 一.环境 vue + echarts 实现饼图的自定义标签 二.实现效果 三.实现方式 import * as echarts from 'echarts'; ex ...

  6. canvas图片旋转扩展出原生JS实现移动端横竖屏手写签名示例

    前提知识 canvas是提供了各种各样的接口去控制画布,比如旋转rotate方法. 这里的旋转并不是真的把这个画布旋转了,例如ctx.rotate(90 * Math.PI / 180)顺时针旋转90 ...

  7. Figma 学习笔记 – Keyboard Shortcut and Tips 小技巧

    参考: 10 tips to work 10x faster in Figma 15 tips to design 15X faster in Figma | Figma Tutorial 2021 ...

  8. Spring —— 注解开发(bean管理)

    注解定义bean       纯注解开发(无需配置文件)       bean作用范围    bean生命周期   

  9. Vue中防抖和节流 --来自官方文档

    Vue 没有内置支持防抖和节流,但可以使用 Lodash 等库来实现. 如果某个组件仅使用一次,可以在 methods 中直接应用防抖: <script src="https://un ...

  10. Kubernetes Pod生命周期(十七)

    前面我们已经了解了 Pod 的设计原理,接下来我们来了解下 Pod 的生命周期.下图展示了一个 Pod 的完整生命周期过程,其中包含 Init Container.Pod Hook.健康检查 三个主要 ...