with(performance){
readyStart = timing.fetchStart - timing.navigationStart;
redirectTime = timing.redirectEnd - timing.redirectStart;
appcacheTime = timing.domainLookupStart - timing.fetchStart;
unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
connectTime = timing.connectEnd - timing.connectStart;
requestTime = timing.responseEnd - timing.requestStart;
initDomTreeTime = timing.domInteractive - timing.responseEnd;domReadyTime = timing.domComplete - timing.domInteractive;
loadTime = timing.loadEventEnd - timing.navigationStart;
//过早获取时 domComplete有时会是0loadEventTime = timing.loadEventEnd - timing.loadEventStart;loadTime = timing.loadEventEnd - timing.navigationStart;
//过早获取时 loadEventEnd有时会是0
console.log('准备新页面时间耗时: ' + readyStart);console.log('redirect 重定向耗时: ' + redirectTime);console.log('Appcache 耗时: ' + appcacheTime);console.log('unload 前文档耗时: ' + unloadEventTime);console.log('DNS 查询耗时: ' + lookupDomainTime);console.log('TCP连接耗时: ' + connectTime);console.log('request请求耗时: ' + requestTime);console.log('请求完毕至DOM加载: ' + initDomTreeTime);console.log('解释dom树耗时: ' + domReadyTime);console.log('从开始至load总耗时: ' + loadTime);
}

mark-zhq[5]

·   navigationStart:当前浏览器窗口的前一个网页关闭,发生unload事件时的Unix毫秒时间戳。如果没有前一个网页,则等于fetchStart属性。

·   unloadEventStart:如果前一个网页与当前网页属于同一个域名,则返回前一个网页的unload事件发生时的Unix毫秒时间戳。如果没有前一个网页,或者之前的网页跳转不是在同一个域名内,则返回值为0。

·   unloadEventEnd:如果前一个网页与当前网页属于同一个域名,则返回前一个网页unload事件的回调函数结束时的Unix毫秒时间戳。如果没有前一个网页,或者之前的网页跳转不是在同一个域名内,则返回值为0。

·   redirectStart:返回第一个HTTP跳转开始时的Unix毫秒时间戳。如果没有跳转,或者不是同一个域名内部的跳转,则返回值为0。

·   redirectEnd:返回最后一个HTTP跳转结束时(即跳转回应的最后一个字节接受完成时)的Unix毫秒时间戳。如果没有跳转,或者不是同一个域名内部的跳转,则返回值为0。

·   fetchStart:返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。

·   domainLookupStart:返回域名查询开始时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。

·   domainLookupEnd:返回域名查询结束时的Unix毫秒时间戳。如果使用持久连接,或者信息是从本地缓存获取的,则返回值等同于fetchStart属性的值。

·   connectStart:返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接(persistent connection),则返回值等同于fetchStart属性的值。

·   connectEnd:返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接,则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

·   secureConnectionStart:返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接,则返回0。

·   requestStart:返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的Unix毫秒时间戳。

·   responseStart:返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的Unix毫秒时间戳。

·   responseEnd:返回浏览器从服务器收到(或从本地缓存读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的Unix毫秒时间戳。

·   domLoading:返回当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的readystatechange事件触发时)的Unix毫秒时间戳。

·   domInteractive:返回当前网页DOM结构结束解析、开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的Unix毫秒时间戳。

·   domContentLoadedEventStart:返回当前网页DOMContentLoaded事件发生时(即DOM结构解析完毕、所有脚本开始运行时)的Unix毫秒时间戳。

·   domContentLoadedEventEnd:返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

·   domComplete:返回当前网页DOM结构生成时(即Document.readyState属性变为“complete”,以及相应的readystatechange事件发生时)的Unix毫秒时间戳。

·   loadEventStart:返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。如果该事件还没有发生,返回0。

·   loadEventEnd:返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。如果该事件还没有发生,返回0。

performance.timing检测页面加载速度的更多相关文章

  1. Selenium简单测试页面加载速度的性能(Page loading performance)

    利用selenium的可以执行javascript脚本的特性,我写了一个java版本的获得页面加载速度的代码,这样你就可以在进行功能测试的同时进行一个简单的测试页面的加载速度的性能测试. 我现在的项目 ...

  2. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  3. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  4. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  5. 压缩代码加速ecshop程序页面加载速度

    由于页面有很多图片,页面加载速度有点慢,本来打算减小图片的体积,后来想想这个后期还得测试下,所以暂时不打算使用google的图片优化工具,先把ecshop生成的html代码压缩下吧 压缩前:首页体积为 ...

  6. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  7. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  8. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  9. 【ASP.NET MVC】提高页面加载速度:脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

随机推荐

  1. mxnet编译问题手记

    MXNet在64位Win7下的编译安装:https://www.cnblogs.com/noahzn/p/5506086.html http://blog.csdn.net/Jarvis_wxy/ar ...

  2. 使用Swoole加速Laravel(正式环境中)

    1 Laravel的速度瓶颈在哪? 1.1 已有的一些优化方法 1.1.1 laravel官方提供了一些优化laravel的优化方法 php artisan optimize php artisan ...

  3. c# 当前不会命中断点 未载入该文档

    C#编码时.有时会遇到标题所说的问题,就是说这个文件和方法明明存在,可总是提示找不到方法.解决方法例如以下: 1.清理全部项目(或相关项目)生成 2.又一次加入全部项目(或相关项目)间的互相引用 3. ...

  4. NSURLSession各文件关系

    NSURLSession   通过session创建任务 @property (class, readonly, strong) NSURLSession *sharedSession; + (NSU ...

  5. Pipeline outbound

    netty源码死磕8 Pipeline outbound 出站流程揭秘 1. Pipeline outbound流程 1.1. 出站的定义 简单回顾一下. 出站(outbound) 操作,通常是处于上 ...

  6. android启动页延时跳转

    package com.goodness.goodness; import android.content.Context; import android.content.Intent; import ...

  7. IaaS,PaaS,Saas 云服务的介绍

    云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infrastructure-as-a-service PaaS:平台服务,Platform-as-a-service SaaS:软件服务 ...

  8. 【prometheus】学习第一篇——prometheus

    前言: 说到监控方案,市面上开源的有很多,最常用的zabbix,深入使用zabbix以后,才知道zabbix设计团队有多厉害,简直是一个完美的监控告警方案.但是在针对docker的监控上还差点,需要自 ...

  9. C#DataSet/DataAdapter

    DataReader必须持续连接,所以在调用方法SqlDataReader作为返回类型时候,必须在方法外关闭流,很不方便. DataAdapter用于对数据源检索数据并填充到DataSet中的表.Da ...

  10. SVN代码merge

    如何merge代码?建议用命令搞merge,客户端图形界面不是很给力.SVN 1.5以上版本,可以使用SVN的自动合并:将主干合并到分支:进入分支目录,执行命令: svn merge http://s ...