window.performance
利用window.performance查看网页性能
一般我们可以通过浏览器的调试工具-网络面板，或者代理工具查看网页加载过程中的各个阶段的耗时。而利用window.performance属性则可以获得更为精确的原始数据，以毫秒为单位，精确到微秒。
performance.timing属性介绍
图片说明如下：
属性说明：
- 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事件的回调函数结束运行时的时间戳。
性能数据分析
前端性能统计的数据大致有以下几个：
- 白屏时间：从打开网站到有内容渲染出来的时间节点；
- 首屏时间：首屏内容渲染完毕的时间节点；
- 用户可操作时间节点：domready触发节点；
- 总下载时间：window.onload的触发节点。
1、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">
是否合理利用域名发散与域名收敛的策略
2、TCP连接耗时：t.connectEnd - t.connectStart
3、首包时间: t.responseStart - t.navigationStart
优化方法：是否加cdn，数据可否静态化等
4、request请求耗时：t.responseEnd - t.requestStart
优化方法：返回内容是否已经压缩过，静态资源是否打包好等。
5、白屏时间 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的时间，并非准确的白屏时间。
6、解析DOM树结构的时间：t.domComplete - t.domLoading
优化方法：检查dom节点是否过多，dom是否嵌套过深
7、页面加载完成的时间：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();
window.performance的更多相关文章
- 前端性能监控方案window.performance 调研(转)
1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的代码监控和以webpagetest为代表的工具监控. 代码监控依托于js代码并部署到需监控的页面,手动计算时间差或者使用浏览器的的API ...
- 前端性能监控：window.performance
window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持.一个performance对象的完整结构如下图所示: memory字段代表JavaScript对内 ...
- 【转载】利用window.performance.timing进行性能分析
利用window.performance.timing进行性能分析 性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备 ...
- 利用window.performance.timing进行性能分析
性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个 ...
- iOS-监听原生H5性能数据window.performance
WebKit-WKWebView iOS8开始苹果推荐使用WKWebview作为H5开发的核心组件,以替代原有的UIWebView,以下是webkit基本介绍介绍: 介绍博客 Webkit H5 - ...
- 借助window.performance实现基本的前端基础性能监控日志
借助window.performance实现基本的前端基础性能监控日志并二次重写console方法方便日常前端console日志的调试 npm install sn-console
- 使用window.performance分析web前端性能
参考链接:https://blog.csdn.net/lovenjoe/article/details/80260658
- 利用performance属性查看网页性能
一般我们可以通过浏览器的调试工具-网络面板,或者代理工具查看网页加载过程中的各个阶段的耗时.而利用window.performance属性则可以获得更为精确的原始数据,以毫秒为单位,精确到微秒. pe ...
- 初探 performance – 监控网页与程序性能
使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据. 配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦! 额,先看下兼容性如何:h ...
随机推荐
- C# Lambda快速深度拷贝
背景:今天上班在班车上和一个同事讨论有关C#拷贝效率的问题,聊到了多种深度拷贝方法,其中就提到了一种Lambda表达式拷贝的方法,这位同事说这种深度拷贝快是快但是如果对象里面再嵌入对象就不能深度拷贝了 ...
- Oracle 多表查询(1)
一.基本概念 多表查询的语法如下: SELECT [DISTINCT] * | 字段 [别名] [,字段 [别名] ,…]FROM 表名称 [别名], [表名称 [别名] ,…][WHERE 条件(S ...
- 问题：Oracle 树形遍历；结果：使用oracle进行遍历树操作
使用oracle进行遍历树操作 1:首先数据库中表必须是树形结构的 2:super_department_id 为 department_id 的父节点编号 3:以下语句的执行结果是:depart ...
- docker 笔记(3)第一个dockerfile
#vim Dockerfile FROM ubuntu RUN apt-get update && apt-get install -y vim #docker build -t ub ...
- DAY12-前端之CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- 2.2.3 Analyzing the output 分析对用户推荐书目的结果(2)
2.2.3 Analyzing the output 在之前的程序运行结果中我们得到的结果输出是: RecommendedItem [item:104, value:4.257081] 程序要 ...
- 记录一次从txt文件导入数据的python下的MySQL实现
环境: python2.7 ComsenzXP自带MySQL 安装python-MySQL模块 数据格式:txt格式的账号信息. 数据一行一条数据. 难点:有的行只有账号,没有密码:有的为空行:有的行 ...
- HDU 6396(2018多校第七场1011) Swordsman
场上场下各种TLE到怀疑人生...经过大佬指点之后才知道要用fread才能过,一般的快读不行... 题意:一个剑客打小怪兽,有n头小怪兽,剑客和小怪兽有m个属性.只有剑客的m个属性都大于等于某个小怪兽 ...
- WCF客户端调用并行最大同时只支持两个请求
做项目的时候发现 频繁调用WCF服务时 明明一次性发起了几十个请求 而在服务端记录的日志却显示出现了排队的迹象 并且都是最大并发数为2 在网上狂搜 大家给出来的解决方法都是增加web.config里面 ...
- Android 中的菜单 OptionsMenu的简单应用
OptionsMenu就是安卓手机中的菜单选项 首先 要实现对菜单的操作就要先重写OnCreateOptionsMenu(Menu menu)方法 通常有两种方法来实现对菜单中选项的添加 第一种是动态 ...