zoukankan      html  css  js  c++  java
  • 使用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

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

  • 相关阅读:
    UNION ALL
    jquery.validate的使用
    通过匹配绑定select option的文本值 模糊匹配
    .net 时间操作[摘抄]
    判断Table表中是否含有某一列
    将数组,表的某一列转换为string字符串的方法
    选出某一列不重复,某一列作为选择条件,其他列正常输出(摘抄)
    SQLite 解决:Could not load file or assembly 'System.Data.SQLite ... 试图加载格式不正确的程序(转)
    金山毒霸占用80端口
    DropDownList 绑定数据后 插入一条不属于表中的数据
  • 原文地址:https://www.cnblogs.com/mengff/p/12880570.html
Copyright © 2011-2022 走看看