• 使用window.performance分析web前端性能


    performance支持多种类型的Timing

    常见的Timing有以下几类:

    1. 页面加载 Navigation timing

    该对象能够帮助网站开发者检测真实用户数据(RUM),例如带宽、延迟或主页的整体页面加载时间。
    用performance.timing可以取到到该对象。

    这两个API非常有用,可以帮助我们获取页面的Domready时间、onload时间、白屏时间等,以及单个页面资源在从发送请求到获取到rsponse各阶段的性能参数。
    使用这两个API时需要在页面完全加载完成之后才能使用,最简单的办法是在window.onload事件中读取各种数据,因为很多值必须在页面完全加载之后才能得出。

    2. 资源加载 Resource Timing API

    这个主要用来获取到单个静态资源(Js,CSS,图片,音频视频等等)从开始发出请求到获取响应之间各个阶段的Timing

    通过performance.getEntries()可以获取所有静态资源的数组列表,点开后显示了,某一个请求的相关参数有name,type,时间等等。
    此外还有,performance.getEntriesByName(),performance.getEntriesByType(),获取单个资源和某类型资源的加载时间

    3. 内存使用情况 performance.memory

    jsHeapSizeLimit: js堆内存大小限制

    totalJSHeapSize: totalJSHeapSize表示当前js堆栈内存总大小

    usedJSHeapSize: usedJSHeapSize表示所有被使用的js堆栈内存,usedJSHeapSize不能大于totalJSHeapSize,如果大于,有可能出现了内存泄漏。

    4. 用户行为 performance.navigation 

    (1)performance.navigation.type

    该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况:

    0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATENEXT。

    1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。

    2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。

    255:任何其他来源的加载,相当于常数performance.navigation.TYPE_UNDEFINED。

    (2)performance.navigation.redirectCount

    表示当前网页经过了多少次重定向跳转。

  • 相关阅读:
    2
    1
    nginx隐藏版本号
    全面对比主流 .NET 报表控件 (转)
    前端的发展和未来趋势
    NPM初学者指南 (转)
    一文解读MySQL事务
    如何高效的学习技术
    重新统一的 .NET平台-.NET 5
    为啥要有微服务?啥是微服务?
  • 原文地址:https://www.cnblogs.com/mengff/p/12880570.html
Copyright © 2020-2023  润新知