performance_performance,php - CSDN
精华内容
参与话题
  • 前端性能之performance performance是前端性能监控的API 它可以检测到白屏时间、首屏时间、用户可操作的时间节点,页面总下载的时间、DNS查询的时间、TCP链接的时间等。 浏览器打印一下 window.performance,可以...

    前端性能之performance

    performance是前端性能监控的API

    它可以检测到白屏时间、首屏时间、用户可操作的时间节点,页面总下载的时间、DNS查询的时间、TCP链接的时间等。

    浏览器打印一下 window.performance,可以看到如下:

    memory 内存相关

    • jsHeapSizeLimit 该属性代表的含义是:内存大小的限制。
    • totalJSHeapSize 表示 总内存的大小。
    • usedJSHeapSize 表示可使用的内存的大小。

    如果 usedJSHeapSize 大于 totalJSHeapSize的话,那么就会出现内存泄露的问题,因此是不允许大于该值的。

     

    navigation 页面的来源信息

    • redirectCount:该值的含义是:如果有重定向的话,页面通过几次重定向跳转而来,默认为0
    • type:该值的含义表示的页面打开的方式。默认为0. 可取值为0、1、2、255
    • 0(TYPE_NAVIGATE):表示正常进入该页面(非刷新、非重定向)。
    • 1(TYPE_RELOAD):表示通过 window.location.reload 刷新的页面。如果我现在刷新下页面后,再来看该值就变成1了。
    • 2(TYPE_BACK_FORWARD ):表示通过浏览器的前进、后退按钮进入的页面。如果我此时先前进下页面,再后退返回到该页面后,查看打印的值,发现变成2了。
    • 255(TYPE_RESERVED):表示非以上的方式进入页面的。

     

    onresourcetimingbufferfull  浏览器的资源时间性能缓冲区满了执行的回调函数

     

    timeOrigin 是一系列时间点的基准点,精确到万分之一毫秒。该值是动态的,刷新下,该值是会发生改变的。

     

    timing 是一系列关键时间点,它包含了网络、解析等一系列的时间数据。

    • navigationStar:同一个浏览器上一个页面卸载结束时的时间戳。如果没有上一个页面的话,那么该值会和fetchStart的值相同
    • redirectStart:该值的含义是第一个http重定向开始的时间戳,如果没有重定向或者重定向到一个不同源的话,那么该值返回为0
    • redirectEnd:最后一个HTTP重定向完成时的时间戳。如果没有重定向,或者重定向到一个不同的源,该值也返回为0
    • fetchStart:浏览器准备好使用http请求抓取文档的时间(发生在检查本地缓存之前)。
    • domainLookupStart:DNS域名查询开始的时间,如果使用了本地缓存话,或 持久链接,该值则与fetchStart值相同。
    • domainLookupEnd:DNS域名查询完成的时间,如果使用了本地缓存话,或 持久链接,该值则与fetchStart值相同。
    • connectStart:HTTP 开始建立连接的时间,如果是持久链接的话,该值则和fetchStart值相同,如果在传输层发生了错误且需要重新建立连接的话,那么在这里显示的是新建立的链接开始时间。
    • secureConnectionStart:HTTPS 连接开始的时间,如果不是安全连接,则值为 0
    • connectEnd:HTTP完成建立连接的时间(完成握手)。如果是持久链接的话,该值则和fetchStart值相同,如果在传输层发生了错误且需要重新建立连接的话,那么在这里显示的是新建立的链接完成时间。
    • requestStart:HTTP请求读取真实文档开始的时间,包括从本地读取缓存,链接错误重连时。
    • responseStart:开始接收到响应的时间(获取到第一个字节的那个时候)。包括从本地读取缓存。
    • responseEnd:HTTP响应全部接收完成时的时间(获取到最后一个字节)。包括从本地读取缓存。
    • unloadEventStart:前一个网页(和当前页面同域)unload的时间戳,如果没有前一个网页或前一个网页是不同的域的话,那么该值为0
    • unloadEventEnd:和 unloadEventStart 相对应,返回是前一个网页unload事件绑定的回调函数执行完毕的时间戳。
    • domLoading:开始解析渲染DOM树的时间。
    • domInteractive:完成解析DOM树的时间(只是DOM树解析完成,但是并没有开始加载网页的资源)。
    • domContentLoadedEventStart:DOM解析完成后,网页内资源加载开始的时间。
    • domContentLoadedEventEnd:DOM解析完成后,网页内资源加载完成的时间。
    • domComplete:DOM树解析完成,且资源也准备就绪的时间。Document.readyState 变为 complete,并将抛出 readystatechange 相关事件。
    • loadEventStart:load事件发送给文档。也即load回调函数开始执行的时间,如果没有绑定load事件,则该值为0
    • loadEventEnd:load事件的回调函数执行完毕的时间,如果没有绑定load事件,该值为0

     

    总结:

    重定向耗时 = redirectEnd - redirectStart

    DNS查询耗时 = domainLookupEnd - domainLookupStart

    TCP链接耗时 = connectEnd - connectStart

    HTTP请求耗时 = responseEnd - responseStart

    解析dom树耗时 = domComplete - domInteractive

    白屏时间 = responseStart - navigationStart

    DOMready时间 = domContentLoadedEventEnd - navigationStart

    onload时间 = loadEventEnd - navigationStart

     

    performance.getEntries()

    该方法包含了所有静态资源的数组列表

    performance.now()

    该方法会返回一个当前页面执行的时间的时间戳,该方法使用了一个浮点数,返回的是以毫秒为单位,小数点精确到微妙级别的时间。相对于Date.now() 更精确,并且不会受系统程序堵塞的影响。

    performance.mark()

    该方法的含义是用来自定义添加标记的时间, 方便我们计算程序的运行耗时。

    performance.getEntriesByType()

    该方法返回一个 PerformanceEntry 对象的列表,基于给定的 entry type

    performance.clearMeasures()

    从浏览器的性能输入缓冲区中移除自定义添加的 measure

    performance.getEntriesByName(name属性的值)

    该方法返回一个 PerformanceEntry 对象的列表,基于给定的 name 和 entry type。

    performance.toJSON()

    该方法是一个 JSON 格式转化器,返回 Performance 对象的 JSON 对象。

     

    注:本文参考自文档:https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

    注:本文参考自博客:https://www.jianshu.com/p/1355232d525a

    展开全文
  • 浏览器中的performance检测页面性能

    千次阅读 2019-01-25 16:42:35
    主要有4方面:(对照下图) 1.控制按钮。 2.overview。...3.火焰图。CPU堆叠追踪的可视化(左侧名称是主线程的各种事件,Network:网络请求详细情况) 4.数据统计。以图表的形式汇总数据(summary:统计报表,Bottom-Up:...

    主要有4方面:(对照下图)
    1.控制按钮。
    2.overview。页面性能的高级汇总(FPS:帧率,CPU:CPU占用,NET:网络请求)
    3.火焰图。CPU堆叠追踪的可视化(左侧名称是主线程的各种事件,Network:网络请求详细情况)
    4.数据统计。以图表的形式汇总数据(summary:统计报表,Bottom-Up:事件时长顺序,Call Tree:事件调用顺序,Event log:事件发生的先后顺序)
    颜色表示:HTML 文件为蓝色,脚本为黄色,样式表为紫色,媒体文件为绿色,其他资源为灰色

    做录制:
    打开想要查看的页面,刷新页面,打开performance面板,点击Record按钮(当前面板左上角),开始录制,recode按钮变为红色,执行页面交互,再次点击Record停止录制。完成录制后,开发者工具会猜测哪一部分记录最相关,并自动缩放到那一部分
    查看结果:
    2.overview窗格包含以下3个图表:
    a.FPS。每秒帧数。绿色竖线越高,FPS越高。FPS图表上的红色块表示长时间帧,很可能会出现卡顿。
    b.CPU。CPU资源。此面积图指示消耗 CPU 资源的事件类型
    c.NET。每条彩色横杠表示一种资源。横杠越长,检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)
    鼠标可以点击或拖动选取某一部分,火焰图自动匹配到相同部分,可以用 W(放大)、S(缩小)、A(左移)、和 D(右移) 键调整选择。
    3.火焰图
    在火焰图上看到一到三条垂直的虚线。
    蓝线::DOMContentLoaded 事件。
    绿线:首次绘制的时间。
    红线: load 事件在火焰图中选择事件时,数据统计窗格会显示与事件相关的其他信息
    诊断:
    js:
    javaScript 计算,特别是会触发大量视觉变化的计算会降低应用性能。 不要让时机不当或长时间运行的 JavaScript 影响用户交互下面是一些常见 JavaScript 问题
    1、大开销输入处理程序影响响应或动画
             让浏览器尽可能晚地处理触摸和滚动,或者绑定侦听
    2、时机不当的 JavaScript 影响响应、动画、加载
            使用 requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程
    3、长时间运行的 JavaScript 影响响应
    将纯粹的计算工作转移到web worker中。如果需要 DOM 访问权限,配合使用requestAnimationFrame
    样式:
    样式更改开销较大,在这些更改会影响 DOM 中的多个元素时更是如此。 只要将样式应用到元素,浏览器就必须确定对所有相关元素的影响、重新计算布局并重新绘制
    点击 Recalculate Style 事件(以紫色显示)可以在 Details 窗格中查看更多相关信息。 如果样式更改需要较长时间,对性能的影响会非常大。 如果样式计算会影响大量元素,则需要改进另一个方面

    要降低 Recalculate Style 事件的影响,使用一些对渲染性能的影响较小的属性。如使用 transform 和 opacity 属性更改来实现动画,使用 will-change 或 translateZ 提升移动的元素

    下面是一些常见的CSS问题
    1、大开销样式计算影响响应或动画
    任何会更改元素几何形状的 CSS 属性,如宽度、高度或位置;浏览器必须检查所有其他元素并重做布局。避免会触发重排的CSS属性
    2、复杂的选择器影响响应或动画
    嵌套选择器强制浏览器了解与所有其他元素有关的全部内容,包括父级和子级。尽量在CSS中引用只有一个类的元素

    重排
    布局(或重排)是浏览器用来计算页面上所有元素的位置和大小的过程。 网页的布局模式意味着一个元素可能影响其他元素;例如body元素的宽度一般会影响其子元素的宽度以及树中各处的节点等等。这个过程对于浏览器来说可能很复杂。 一般的经验法则是,如果在帧完成前从 DOM 请求返回几何值,将发现会出现“强制同步布局”,在频繁地重复或针对较大的 DOM 树执行操作时这会成为性能的大瓶颈。
    performance面板可以确定页面何时会导致强制同步布局。 这些 Layout 事件使用红色竖线标记
    “布局抖动”是指反复出现强制同步布局情况。 这种情况会在 JavaScript 从 DOM 反复地写入和读取时出现,将会强制浏览器反复重新计算布局

    重绘
    绘制是填充像素的过程。这经常是渲染流程开销最大的部分。 如果在任何情况下注意到页面出现卡顿现象,很有可能存在绘制问题。
    合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。 大多数情况下,如果坚持仅合成器属性并避免一起绘制,性能会有极大的改进,但是需要留意过多的层计数
    ---------------------
    作者:vanessa_earth
    来源:CSDN
    原文:https://blog.csdn.net/kongduxue/article/details/82017491
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • Performance — 前端性能监控利器

    万次阅读 2017-11-12 19:08:13
    Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 属性 timing (P
    https://www.cnblogs.com/bldxh/p/6857324.html
    

    最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文。
    Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。

    属性

    timing (PerformanceTiming)

    从输入url到用户可以使用页面的全过程时间统计,会返回一个PerformanceTiming对象,单位均为毫秒

    按触发顺序排列所有属性:(更详细标准的解释请参看:W3C Editor's Draft)
    navigationStart:在同一个浏览器上下文中,前一个网页(与当前页面不一定同域)unload 的时间戳,如果无前一个网页 unload ,则与 fetchStart 值相等
    unloadEventStart:前一个网页(与当前页面同域)unload 的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0
    unloadEventEnd:和 unloadEventStart 相对应,返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
    redirectStart:第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0
    redirectEnd:最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内的重定向才算,否则值为 0
    fetchStart:浏览器准备好使用 HTTP 请求抓取文档的时间,这发生在检查本地缓存之前
    domainLookupStart:DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
    domainLookupEnd:DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等
    connectStart:HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间
    connectEnd:HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间

    注意:这里握手结束,包括安全连接建立完成、SOCKS 授权通过

    secureConnectionStart:HTTPS 连接开始的时间,如果不是安全连接,则值为 0
    requestStart:HTTP 请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存,连接错误重连时,这里显示的也是新建立连接的时间
    responseStart:HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存
    responseEnd:HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存
    domLoading:开始解析渲染 DOM 树的时间,此时 Document.readyState 变为 loading,并将抛出 readystatechange 相关事件
    domInteractive:完成解析 DOM 树的时间,Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件

    注意:只是 DOM 树解析完成,这时候并没有开始加载网页内的资源

    domContentLoadedEventStart:DOM 解析完成后,网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间
    domContentLoadedEventEnd:DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕),文档的DOMContentLoaded 事件的结束时间
    domComplete:DOM 树解析完成,且资源也准备就绪的时间,Document.readyState 变为 complete,并将抛出 readystatechange 相关事件
    loadEventStart:load 事件发送给文档,也即 load 回调函数开始执行的时间,如果没有绑定 load 事件,值为 0
    loadEventEnd:load 事件的回调函数执行完毕的时间,如果没有绑定 load 事件,值为 0

    常用计算:
    DNS查询耗时 :domainLookupEnd - domainLookupStart
    TCP链接耗时 :connectEnd - connectStart
    request请求耗时 :responseEnd - responseStart
    解析dom树耗时 : domComplete - domInteractive
    白屏时间 :responseStart - navigationStart
    domready时间(用户可操作时间节点) :domContentLoadedEventEnd - navigationStart
    onload时间(总下载时间) :loadEventEnd - navigationStart

    旨在告诉开发者当前页面是通过什么方式导航过来的,只有两个属性:typeredirectCount

    type:标志页面导航类型,值如下表

    type常数 枚举值 描述
    TYPE_NAVIGATE 0 普通进入,包括:点击链接、在地址栏中输入 URL、表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的方式初始化脚本。
    TYPE_RELOAD 1 通过刷新进入,包括:浏览器的刷新按钮、快捷键刷新、location.reload()等方法。
    TYPE_BACK_FORWARD 2 通过操作历史记录进入,包括:浏览器的前进后退按钮、快捷键操作、history.forward()、history.back()、history.go(num)。
    TYPE_UNDEFINED 255 其他非以上类型的方式进入。


    注意:稍带个小知识,history.go(url)这种非标准写法目前主流浏览器均不支持,问题可参考http://stackoverflow.com/questions/6277283/history-gourl-issue

    redirectCount:表示到达最终页面前,重定向的次数,但是这个接口有同源策略限制,即仅能检测同源的重定向。

    注意:所有前端模拟的重定向都无法统计到,因为不属于HTTP重定向

    memory

    描述内存多少,是在Chrome中添加的一个非标准属性。
    jsHeapSizeLimit: 内存大小限制
    totalJSHeapSize: 可使用的内存
    usedJSHeapSize: JS对象(包括V8引擎内部对象)占用的内存,不能大于totalJSHeapSize,如果大于,有可能出现了内存泄漏

    方法

    getEntries()

    获取所有资源请求的时间数据,这个函数返回一个按startTime排序的对象数组,数组成员除了会自动根据所请求资源的变化而改变以外,还可以用mark(),measure()方法自定义添加,该对象的属性中除了包含资源加载时间还有以下五个属性。
    name:资源名称,是资源的绝对路径或调用mark方法自定义的名称
    startTime:开始时间
    duration:加载时间
    entryType:资源类型,entryType类型不同数组中的对象结构也不同!具体见下
    initiatorType:谁发起的请求,具体见下

    entryType的值:

    该类型对象 描述
    mark PerformanceMark 通过mark()方法添加到数组中的对象
    measure PerformanceMeasure 通过measure()方法添加到数组中的对象
    resource PerformanceResourceTiming 所有资源加载时间,用处最多
    navigation PerformanceNavigationTiming 现除chrome和Opera外均不支持,导航相关信息
    frame PerformanceFrameTiming 现浏览器均未支持
    server PerformanceServerTiming 未查到相关资料

    initiatorType的值:

    发起对象 描述
    a Element link/script/img/iframe 通过标签形式加载的资源,值是该节点名的小写形式
    a CSS resourc css 通过css样式加载的资源,比如background的url方式加载资源
    a XMLHttpRequest object xmlhttprequest 通过xhr加载的资源
    a PerformanceNavigationTiming object navigation 当对象是PerformanceNavigationTiming时返回
    //根据entryType类型返回的不同对象
    
    PerformanceMark:{  //通过mark()方法添加的对象
        entryType:"mark"
        name:调用mark()方法时自定义的名字
        startTime: 做标记的时间
        duration:0
    }
    
    PerformanceMeasure:{  //通过measure()方法添加的对象
        entryType:"measure"
        name:调用measure()方法时自定义的名字
        startTime: 开始量的时间
        duration:标记的两个量的时间间隔
    }
    PerformanceResourceTiming:{  //可以用来做一个精准的进度条
        entryType:"resource"
        name:资源的绝对路径,即URL
        startTime: 即将抓取资源的时间,
        duration: responseEnd - startTime
        initiatorType:略!/:傲娇脸
        //其他属性请参考performance.timing
    }
    PerformanceNavigationTiming:{
        entryType:"navigation"
        name:本页路由,即地址栏看到的地址
        startTime: 0
        duration: loadEventEnd - startTime 
        initiatorType:"navigation"
        //其他属性请参考performance.timing
    }

    请注意:

    1. 目前通过<audio><video>加载资源,initiatorType还无法返回"audio"和"video",chrome中只能返回空字符串,firfox返回"other"
    2. 如果一个图片在页面内既用img引入,又作为背景图片引入,那么initiatorType返回的"img"
    3. performance.getEntries(params)这种形式仍出于草案阶段,目前所有浏览器均为支持。但是非常有用,期待早些实现。
    4. 使用该方法统计资源信息的时候首先可以合理利用clearResourceTimings清除已统计过的对象避免重复统计,其次要过滤掉因上报统计数据而产生的对象。

    getEntriesByName(name,type[optional]),getEntriesByType(type)

    name:想要筛选出的资源名
    type:entryType的值中一个
    返回值仍是一个数组,这个数组相当于getEntries()方法经过所填参数筛选后的一个子集

    clearResourceTimings();

    该方法无参数无返回值,可以清楚目前所有entryType为"resource"的数据,用于写单页应用的统计脚本非常有用

    mark(name),measure(name, startMark, endMark),clearMarks(),clearMeasures()

    用于做标记和清除标记,供用户自定义统计一些数据,比如某函数运行耗时等

    name:自定义的名称,不要和getEntries()返回的数组中其他name重复
    startMark:作为开始时间的标记名称或PerformanceTiming的一个属性
    endMark:作为结束时间的标记名称或PerformanceTiming的一个属性

    创建标记:mark(name);
    记录两个标记的时间间隔:measure(name, startMark, endMark);
    清除指定标记:window.performance.clearMarks(name);
    清除所有标记:window.performance.clearMarks();
    清除指定记录间隔数据:window.performance.clearMeasures(name);
    清除所有记录间隔数据:window.performance.clearMeasures();

    now()

    performance.now()是当前时间与performance.timing.navigationStart的时间差,以微秒(百万分之一秒)为单位的时间,与 Date.now()-performance.timing.navigationStart的区别是不受系统程序执行阻塞的影响,因此更加精准。

    友情提示

    目前主流浏览器虽然都已支持Performance对象,但是并不能支持它上面的全部属性和方法,本文主要依据chrome编写,因此提到的chrome浏览器都是兼容的,其他具体使用时兼容性请自行测试,目前已测如下:
    1.safari浏览器(包括mac和ios)只支持navigation,timing,now其余均不支持
    2.微信浏览器支持timing,navigation属性,不支持performance.getEntries方法

    推荐及参考文章

    MDN-Performance
    W3C Editor's Draft
    初探performance-监控网页与程序性能
    使用性能API快速分析web前端性能

    展开全文
  • (一)performance初识

    千次阅读 2017-03-16 15:55:25
    测试

    performance是W3C基于前端对性能的需求下推出的一套性能API标准,这套API的目的是简化开发者对网站性能进行精确分析与控制过程,当然对于测试开发来说,也可以利用这套API开发自己的框架来得到前端性能参数。

    一、前端知识

    要学习这套API的使用,先简单介绍下前端的基础知识。

    1.页面加载

    一个页面的请求到响应再到显示出来,需要经过下面一些重要过程,当我们在浏览器输入一个URL或者说点击一个URL开始,会出现如下流程:

    (1)页面准备

    (2)重定向:在header定义了重定向才会有这个过程,如果没有重定向,不会产生这个过程。

    (3)app cache:会先检查这个域名是否有缓存,如果有缓存就不需要DNS解析域名。这里的app是值应用程序application,不指手机app。

    (4)DNS解析:把域名解析成IP,如果直接用ip地址访问,不产生这个过程。

    (5)TCP连接:http协议是经过TCP来传输的,所以产生一个http请求就会有TCP connect,但是依赖于长连接,不会产生这个过程。

    (6)request header:请求头信息。

    (7)request body:请求体信息,比如get请求是没有请求体信息的,所以没有这个过程,这就是为什么把头跟体分开写的原因。

    (8)response header:响应头信息。

    (9)response body:响应体信息。

    (10)解析HTML结构

    (11)加载外部脚本和样式表文件:正常来说JS、css都是外部加载的,当然有不正常的人啊,比如我。

    (12)解析并执行脚本代码

    (13)构建与解析HTML DOM树:这个过程可以去了解下DOM树是怎样的就明白啦。

    (14)加载外部图片

    (15)页面加载完成,显示出来啦。

    说实话,一个页面加载要这么多流程,它不觉得累,我觉得好累啊。

    2.重定向分析

    为什么单独说一下这个重定向呢?因为刚开始我也想不通为什么重定向放在最开始,因为是否重定向是在request header中定义的啊,但是接着DNS、TCP连接,不应该是先DNS、TCP连接、request header再重定向吗?答案是的,来看看下面流程:

    (1)app cach

    (2)DNS解析

    (3)TCP连接

    (4)request header

    (5)重定向

    (6)app cach

    (7)DNS解析

    (8)TCP连接

    (9)request header

    从上面就可以看出来,实际上面15个步骤我是把重定向的过程没有写的那么细啦,而实际重定向本身就是要经过DNS、TCP连接、request header再重定向的。所以说一般

    有重定向的请求耗时会多一些。


    二、performance

    说完了前端的东西,这下轮到说正题啦,开始介绍到performance提供了一套API,下面就从API介绍开始吧。

    1.performance.timing

    这个API能帮我们得到整个页面请求的时间,如下图,在Chrome的Console是可以直接运行的


    先解释下这些时间都是代表什么

    timing 对象里边的数据比较多,梳理如下几个关键性的节点:

    • fetchStart:发起获取当前文档的时间点,我的理解是浏览器收到发起页面请求的时间点;
    • domainLookupStart:返回浏览器开始DNS查询的时间,如果此请求没有DNS查询过程,如长连接、资源cache、甚至是本地资源等,那么就返回 fetchStart的值;
    • domainLookupEnd:返回浏览器结束DNS查询的时间,如果没有DNS查询过程,同上;
    • connectStart:浏览器向服务器请求文档,开始建立连接的时间,如果此连接是一个长连接,或者无需与服务器连接(命中缓存),则返回domainLookupEnd的值;
    • connectEnd:浏览器向服务器请求文档,建立连接成功的时间;
    • requestStart:开始请求文档的时间(注意没有requestEnd);
    • responseStart:浏览器开始接收第一个字节数据的时间,数据可能来自于服务器、缓存、或本地资源;
    • unloadEventStart:卸载上一个文档开始的时间;
    • unloadEventEnd:卸载上一个文档结束的时间;
    • domLoading:浏览器把document.readyState设置为“loading”的时间点,开始构建dom树的时间点;
    • responseEnd:浏览器接收最后一个字节数据的时间,或连接被关闭的时间;
    • domInteractive:浏览器把document.readyState设置为“interactive”的时间点,DOM树创建结束;
    • domContentLoadedEventStart:文档发生DOMContentLoaded事件的时间;
    • domContentLoadedEventEnd:文档的DOMContentLoaded 事件结束的时间;
    • domComplete:浏览器把document.readyState设置为“complete”的时间点;
    • loadEventStart:文档触发load事件的时间;
    • loadEventEnd:文档出发load事件结束后的时间

    再来一张图,表示各阶段的开始与结束对应的时间


    从以上的分析,我们就可以得到一些时间的计算,一个个来吧。

    (1)准备新页面耗时:fetchStart - navigationStart

    (2)重定向时间:redirectEnd - redirectStart

    (3)App Cache时间:domainLookupStart - fetchStart

    (4)DNS解析时间:domainLookupEnd -domainLookupStart

    (5)TCP连接时间:connectEnd - connectStart

    (6)request时间:responseEnd - requestStart 这个计算是代表请求响应加起来的时间

    (7)请求完毕到DOM树加载:domInteractive -responseEnd

    (8)构建与解析DOM树,加载资源时间:domCompleter -domInteractive

    (9)load时间:loadEventEnd - loadEventStart

    (10)整个页面加载时间:loadEventEnd -navigationStart

    (11)白屏时间:responseStart-navigationStart

    2.performance.getEntries()

    这个API能帮我们获得资源的请求时间,包括JS、CSS、图片等。


    如上图可以看到这个API请求返回的是一个数组,这个数组包括整个页面所有的资源加载,上图打开了一个其中一个资源,可以看到如下信息:

    (1)entryType:类型为resource

    (2)name:资源的url

    (3)initiatorType:资源是link

    (4)资源时间:duration的值,是responseEnd - startTime得到的

    3.performance.memory

    这个API主要是得到浏览器内存情况:

    (1)jsHeapSizeLimit:内存大小限制

    (2)totalJSHeapSize:可使用的内容

    (3)userdJSHeapSize:已使用的内容

    userdJSHeapSize表示所有被使用的JS堆栈内存,totalJSHeapSize可使用的JS堆栈内存,如果userdJSHeapSize的值大于totalJSHeapSize,就可能出现内存泄漏。



    参考文章:

    http://www.tuicool.com/articles/ymQbMr

    http://www.tuicool.com/articles/uyE7Bvf

    http://www.xuanfengge.com/html5-performance-front-end-load-performance-of.html

    http://shuizhongyue.blog.51cto.com/7439523/1718327

    展开全文
  • 监控工具 performance

    2020-09-10 15:35:57
    监控工具 performance performance是W3C引入的web API。接口可以获取当前页面中与性能相关的信息。 可以获取的信息: 白屏时间:从打开网站到有内容渲染出来的时间节点 首屏时间:首屏内容渲染完毕的时间节点 用户...
  • Performance:前端页面性能监控

    千次阅读 2018-06-26 18:35:52
    可以通过调用只读属性 window.performance来获得。浏览器兼容:IE9+,Chrome6+,Firefox7+一、属性1、Performance.navigation 提供了在指定时间内发生的操作相关信息,包括redirectCount和type两个属性。 red...
  • 主要有4方面:(对照下图) 1.控制按钮。 2.overview。...3.火焰图。CPU堆叠追踪的可视化(左侧名称是主线程的各种事件,Network:网络请求详细情况) 4.数据统计。以图表的形式汇总数据(summary:统计报表,Bottom-Up:...
  • 使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据。 配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦! 额,先看下兼容性如何:...
  • js同异步 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description...meta na
  • The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path:XXXX出现原因分析:Tomcat建议使用apache的apr,来更好的运行...
  • SQL Server Performance 分析

    千次阅读 2018-01-13 13:54:00
    对网络上的一篇博客做下笔记,适当扩展下对 Performance 各个涉及到的要素。这篇文章讲的是分析性能,老外写的: How to analyse SQL Server performance 主要的要点有这些: · How does SQL Server work · ...
  • Do you want your .NET code to have the absolute best performance it can? This book demystifies the CLR, teaching you how and why to write code with optimum performance. Learn critical lessons from a ...
  • SAP Performance浅析

    千次阅读 2013-09-23 21:38:19
    在ABAP开发中,Program的Performance tunning应该说是最基本也是最常见的工作内容,无论是在新项目的开发、还是老项目的maintainance。同时,关于performance,也是ABAP面试中几乎必问的问题之一。在performance
  • performance_schema 是一种处于low level的监控手段,有如下特性 1,ps主要关注于数据库的性能数据,而information_schema 主要关注metadata信息 2,ps 主要监控服务器的events,这里的event跟二进制日志里的...
  • Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 页面的性能问题是前端开发中...
  • 在同样的网络环境下,有两个同样能满足你的需求的网站,...Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window....
  • mysql performance schema

    千次阅读 2014-01-06 14:39:32
    Mysql Performance SchemaDBA/李思亮我们使用mysql 5.5 也有一段时间了,对于performance schema 引擎的使用问题,一直没有开展起来,主要原因是资料太少。这段时间花了一些时间专门的关注了一下,形成本文档:Mysql...
  • window.performance

    千次阅读 2017-05-27 14:04:45
    在chrome控制台执行window.performance,会出现下面结果: 简单介绍performance中的属性: memory:{ jsHeapSizeLimit: 1136000000 // 内存大小限制 totalJSHeapSize: 16100000 // 可使用的内存 ...
  • [C#]服务为何会依赖于WMI Performance Adapter服务编写者日期关键词郑昀@ultrapower2005-6-13Service C# Cache “WMI Performance Adapter”“Microsoft Enterprise Library” 现象我们的C#编写的Windows Service...
  • performance_schema的介绍

    千次阅读 2017-01-04 19:07:36
    mysql 5.5 版本 新增了一个性能优化的引擎: PERFORMANCE_SCHEMA这个功能默认是关闭的: 需要设置参数: performance_schema 才可以启动该功能,这个参数是静态参数,只能写在my.cnf 中 不能动态修改。 先看看...
1 2 3 4 5 ... 20
收藏数 319,562
精华内容 127,824
关键字:

performance