利用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的更多相关文章

  1. 前端性能监控方案window.performance 调研(转)

    1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的代码监控和以webpagetest为代表的工具监控. 代码监控依托于js代码并部署到需监控的页面,手动计算时间差或者使用浏览器的的API ...

  2. 前端性能监控：window.performance

    window.performance 是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持.一个performance对象的完整结构如下图所示: memory字段代表JavaScript对内 ...

  3. 【转载】利用window.performance.timing进行性能分析

    利用window.performance.timing进行性能分析   性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备 ...

  4. 利用window.performance.timing进行性能分析

    性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个 ...

  5. iOS-监听原生H5性能数据window.performance

    WebKit-WKWebView iOS8开始苹果推荐使用WKWebview作为H5开发的核心组件,以替代原有的UIWebView,以下是webkit基本介绍介绍: 介绍博客 Webkit H5 - ...

  6. 借助window.performance实现基本的前端基础性能监控日志

    借助window.performance实现基本的前端基础性能监控日志并二次重写console方法方便日常前端console日志的调试 npm install sn-console

  7. 使用window.performance分析web前端性能

    参考链接:https://blog.csdn.net/lovenjoe/article/details/80260658

  8. 利用performance属性查看网页性能

    一般我们可以通过浏览器的调试工具-网络面板,或者代理工具查看网页加载过程中的各个阶段的耗时.而利用window.performance属性则可以获得更为精确的原始数据,以毫秒为单位,精确到微秒. pe ...

  9. 初探 performance – 监控网页与程序性能

    使用 window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据. 配合上报一些客户端浏览器的设备类型等数据,就可以实现简单的统计啦! 额,先看下兼容性如何:h ...

随机推荐

  1. Celery-4.1 用户指南: Configuration and defaults (配置和默认值)

    这篇文档描述了可用的配置选项. 如果你使用默认的加载器,你必须创建 celeryconfig.py 模块并且保证它在python路径中. 配置文件示例 以下是配置示例,你可以从这个开始.它包括运行一个 ...

  2. delphi 从 TWebbrowse组件中获取图片

    在 delphi 中使用 TWebbrowse 组件,虽然效率不如用(idhttp之类)模拟操作效率高.但其难度低,上手快,简单粗暴有效. 从网上搜到的处理此问题的文章大多是 ctrl + c 复制到 ...

  3. python获得当前工作目录和修改

    import os  curDir = os.getcwd() 最近使用Python 写了很多脚本,想导入脚本,发现不知道如何查看python 的默认工作目录,并修改默认工作目录. 方法/步骤   查 ...

  4. javaScript之NodeList

    NodeList对象 是DOM操作取出的集合(实际上是基于DOM结构动态查询的结果),用来保存一组有序的节点,可以通过位置来访问这些节点,它并不是array的实例. Nodelist最大的特点就是它的 ...

  5. springmvc 路径问题

    web项目中的相对路径可以分为二类: 1.以斜杠开头:以斜杠开头的又分为二类(分类依据是斜杠出现的位置):如果出现在java代码或者配置文件(xml,properties等),这个路径叫做后台路径. ...

  6. PHP通过加锁实现并发情况下抢码功能

    本文基于php语言使用加锁实现并发情况下抢码功能,特定时间段开放抢码并不允许开放的码重复: 需求:抢码功能 要求: 1.特定时间段才开放抢码: 2.每个时间段放开的码是有限的: 3.每个码不允许重复: ...

  7. GitHub Blog创建以及本地管理（转）

    GitHub Blog创建以及本地管理   创建 注册GitHub账户 首页点击新建仓库 New repository repository name必须为 Owner.github.io EX:我的 ...

  8. 推荐两款富文本编辑器：NicEdit和Kindeditor

    做过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多.下面要推荐的两款富文本编辑器都是使用JS编 ...

  9. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

  10. opencv 基本数据结构

    转自:http://www.cnblogs.com/guoqiaojin/p/3176692.html opencv 基本数据结构   DataType : 将C++数据类型转换为对应的opencv数 ...