window.performance

时间 2019-11-14

标签 window.performance window performance 栏目 Windows 繁體版

原文原文链接

利用window.performance查看网页性能javascript

通常咱们能够经过浏览器的调试工具-网络面板，或者代理工具查看网页加载过程当中的各个阶段的耗时。而利用window.performance属性则能够得到更为精确的原始数据，以毫秒为单位，精确到微秒。css

performance.timing属性介绍html

图片说明以下：前端

属性说明：java

navigationStart：浏览器处理当前网页的启动时间
fetchStart：浏览器发起http请求读取文档的毫秒时间戳。
domainLookupStart：域名查询开始时的时间戳。
domainLookupEnd：域名查询结束时的时间戳。
connectStart：http请求开始向服务器发送的时间戳。
connectEnd：浏览器与服务器链接创建（握手和认证过程结束）的毫秒时间戳。
requestStart：浏览器向服务器发出http请求时的时间戳。或者开始读取本地缓存时。
responseStart：浏览器从服务器（或读取本地缓存）收到第一个字节时的时间戳。
responseEnd：浏览器从服务器收到最后一个字节时的毫秒时间戳。
domLoading：浏览器开始解析网页DOM结构的时间。
domInteractive：网页dom树建立完成，开始加载内嵌资源的时间。
domContentLoadedEventStart：网页DOMContentLoaded事件发生时的时间戳。
domContentLoadedEventEnd：网页全部须要执行的脚本执行完成时的时间，domReady的时间。
domComplete：网页dom结构生成时的时间戳。
loadEventStart：当前网页load事件的回调函数开始执行的时间戳。
loadEventEnd：当前网页load事件的回调函数结束运行时的时间戳。

性能数据分析

前端性能统计的数据大体有如下几个：chrome

白屏时间：从打开网站到有内容渲染出来的时间节点；
首屏时间：首屏内容渲染完毕的时间节点；
用户可操做时间节点：domready触发节点；
总下载时间：window.onload的触发节点。

一、DNS寻址时间：t.domainLookupEnd - t.domainLookupStart。浏览器

优化方法：检查页面是否添加了DNS预解析代码。缓存

　　DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的链接时就无需进行DNS的解析，减小用户等待时间，提升用户体验。目前支持 DNS Prefetch 的浏览器有 google chrome 和 firefox 3.5。若是要控制浏览器端是否对域名进行预解析，能够经过Http header 的x-dns-prefetch-control 属性进行控制。服务器

<link rel="dns-prefetch" href="//haitao.nosdn1.127.net">

　　是否合理利用域名发散与域名收敛的策略网络

二、TCP链接耗时：t.connectEnd - t.connectStart

三、首包时间: t.responseStart - t.navigationStart

优化方法：是否加cdn，数据能否静态化等

四、request请求耗时：t.responseEnd - t.requestStart

　　优化方法：返回内容是否已经压缩过，静态资源是否打包好等。

五、白屏时间 domLoading - fetchStart

　　白屏时间节点指的是从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展现出来的时间节点。这个过程包括dns查询、创建tcp链接、发送首个http请求（若是使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕。

　　使用注入代码监控没法获取解析html文档以前的时间信息，目前广泛使用的白屏时间统计方案是在html文档的head中全部的静态资源以及内嵌脚本/样式以前记录一个时间点，在head最底部记录另外一个时间点，二者的差值做为白屏时间。

<html>
    <head>
        <meta charset="UTF-8"/>
        <!--这里还有一大串meta信息-->
        <script>
           var start_time = new Date();//统计起点，实际为html开始解析的时间节点
        </script>
        <link href='a.css'></link>
        <script src='a.js'></script>
        <script>
            var end_time = new Date();//统计起点，实际为html开始解析的时间节点
        </script>
    </head>
    <body>
    </body>
</html>

　　上述代码中的end_time和start_time的差值通常做为白屏时间的估值，但理论上来说，这个差值只是浏览器解析html文档head的时间，并不是准确的白屏时间。

六、解析DOM树结构的时间：t.domComplete - t.domLoading

　　优化方法：检查dom节点是否过多，dom是否嵌套过深

七、页面加载完成的时间：t.loadEventEnd - t.fetchStart

　　首屏时间的统计比较复杂，目前应用比较广的方案是将首屏的图片、iframe等资源添加onload事件，获取最慢的一个。这种方案比较适合首屏元素数量固定的页面。

优化方法：考虑延迟加载，懒加载，部分加载，减小首屏渲染时间

方法

　　performance.getEntries()：每一个资源请求的时间数据。

　　performance.now() 计算网页从performance.timing.navigationStart到当前时间的毫秒数。

　　精确计算某个操做，或某个方法执行的耗时。

var start = performance.now();
dosomething();
var end = performance.now();
var time = end - start;
console.log('耗时' + time + '毫秒。');

　　performance.mark()给相应的视点作标记。结合performance.measure()使用也能够算出各个时间段的耗时。

　　执行下列代码能够查看页面加载各个阶段的耗时。

function getTimes(){
    var t = performance.timing;
    var timing = {
        domainLookupTime: t.domainLookupEnd - t.domainLookupStart,
        TCPConnectTime: t.connectEnd - t.connectStart,
        ttfb: t.responseStart - t.navigationStart,
        requestTime: t.responseEnd - t.requestStart,
        waitTime: t.domLoading - t.navigationStart,
        renderDomTime: t.domComplete - t.domLoading,
        loadPageTime: t.loadEventEnd - t.fetchStart
    }
    console.log(timing);
}
getTimes();