window.performance 网页性能计算

▲ 是什么?

performance 是 浏览器提供的一个js对象,里面存储了各种性能指标。

查看浏览器是否支持 performance --->>> https://caniuse.com/#search=performance

几乎都是支持performance属性的

▲ 怎么用?

先看下 github上 一个比较好的使用例子,https://github.com/addyosmani/timing.js/blob/master/timing.js

再看下官方 API: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

各指标详细解释:https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming

来看下这张好图,

https://www.w3.org/TR/navigation-timing/#sec-window.performance-attribute

里面详解了详细的时间过程

▲ 几个经常使用的参数

    var t = performance.timing;
    var times = {};
 
    //【重要】页面加载完成的时间
    //【原因】这几乎代表了用户等待页面可用的时间
    times.loadPage = t.loadEventEnd - t.navigationStart;
 
    //【重要】解析 DOM 树结构的时间
    //【原因】反省下你的 DOM 树嵌套是不是太多了!
    times.domReady = t.domComplete - t.responseEnd;
 
    //【重要】重定向的时间
    //【原因】拒绝重定向!比如,http://example.com/ 就不该写成 http://example.com
    times.redirect = t.redirectEnd - t.redirectStart;
 
    //【重要】DNS 查询时间
    //【原因】DNS 预加载做了么?页面内是不是使用了太多不同的域名导致域名查询的时间太长?
    // 可使用 HTML5 Prefetch 预查询 DNS ,见:[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)            
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
 
    //【重要】读取页面第一个字节的时间
    //【原因】这可以理解为用户拿到你的资源占用的时间,加异地机房了么,加CDN 处理了么?加带宽了么?加 CPU 运算速度了么?
    // TTFB 即 Time To First Byte 的意思
    // 维基百科:https://en.wikipedia.org/wiki/Time_To_First_Byte
    times.ttfb = t.responseStart - t.navigationStart;
 
    //【重要】内容加载完成的时间
    //【原因】页面内容经过 gzip 压缩了么,静态资源 css/js 等压缩了么?
    times.request = t.responseEnd - t.requestStart;
 
    //【重要】执行 onload 回调函数的时间
    //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了,考虑过延迟加载、按需加载的策略么?
    times.loadEvent = t.loadEventEnd - t.loadEventStart;
 
    // DNS 缓存时间
    times.appcache = t.domainLookupStart - t.fetchStart;
 
    // 卸载页面的时间
    times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
 
    // TCP 建立连接完成握手的时间
    times.connect = t.connectEnd - t.connectStart;

▲ 另个好用的更精准的计时函数

performance.mark(name)

performance.now()

var t0 = performance.now();
doSomething();
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); 
performance.mark("Begin");
do_work(50000);
performance.mark("End");
console.log(performance.getEntriesByName("Begin", "mark"));

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏艾斯博客www.vpsss.net

如何创建.htaccess 文件

关于.htaccess 文件,一般用于虚拟主机中,使用 VPS 建站的可以忽略了。对于使用虚拟主机建站的朋友来说.htaccess 文件可以用作伪静态化设置和 ...

4458
来自专栏互联网杂技

SpringBoot ( 十二 ) :SpringBoot 如何测试打包部署

有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发、调试...

872
来自专栏智能大石头

NewLife.Net——开始网络编程

网络编程的重要性就不说了,先上源码:https://github.com/nnhy/NewLife.Net.Tests

910
来自专栏NetCore

Identity Service - 解析微软微服务架构eShopOnContainers(二)

接上一篇,众所周知一个网站的用户登录是非常重要,一站式的登录(SSO)也成了大家讨论的热点。微软在这个Demo中,把登录单独拉了出来,形成了一个Service,...

2585
来自专栏Seebug漏洞平台

使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器

来源:BypassingXSSFiltersusingXMLInternalEntities 原作者:DavidLitchfield (david@davidl...

39110
来自专栏数据之美

使用 django-blog-zinnia 搭建个人博客

django-blog-zinnia 虽然小巧,但是具备了个人博客应用的全部基础功能,且具有很高的拓展性,并且开箱即用。以下是官方列出的一些特性: 评论 站...

3029
来自专栏北京马哥教育

利用anaconda搞定所有Python安装问题

很多人按照我之前的Python安装教程可以成功,但是方法之下必定有BUG,所以还有一部分人(电脑)无法配置成功,有没有一个软件可以自带一系列常用的安装包!!! ...

6246
来自专栏编程坑太多

跟我一起学docker(15)--监控日志和日志管理

2634
来自专栏智能大石头

NewLife.Net——开始网络编程

1293
来自专栏技术博客

Asp.Net MVC 3.0 使用Gzip压缩

Gzip最早由Jean-loup Gailly和Mark Adler创建,用于Unix系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件,它们就是G...

1122

扫码关注云+社区