利用Navigation Timing测量页面加载时间
最近在看一本名为《web性能实践日志》的书籍，其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法，这也是W3C Web性能工作小组正在做的事情，接下来我就给大家大概介绍一下：
首先先撇开这篇文章所要介绍的，如果要你来写一段代码来计算整个页面加载的时间的话，我们一般都会这样做：获得页面开始加载的时间和结束加载的时间，两个一减便是页面加载的时间了，没错，代码如下：
<html>
<head>
<script type="text/javascript"> var start = new Date().getTime(); //获取开始加载时间
function onLoad() {
var now = new Date().getTime(); //获取加载结束时间
var latency = now - start; //页面加载时间
alert("page loading time: " + latency);
} </script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
这是计算页面加载时间的简单脚本，但是如果我们想进一步深入了解资源的加载时间呢？比如我想知道dom内容加载完毕的时间，而非页面加载的时间呢，上述代码明显做不到了。
然而W3C提供了window.performance.timing方法让我们可以轻松获得页面各个部分的加载时间，具体代码页非常简单，如下：
<html>
<head>
<script type="text/javascript"> function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart; //performance.timing.navigationStart即为获取页面开始加载时间
alert("User-perceived page loading time: " + page_load_time);
} </script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>
经过实践发现，通过上述方法获取的页面加载时间相比第一种获取的时间稍微多那么几毫秒，根据不同页面的大小可能数值会有出入，但是上述方式获取的时间肯定比我们一开始写的要更加精确，同样的，当我们想知道dom内容加载完毕的时间的话，代码改为：
<script>
function onLoad(){
var now=new Date().getTime();
var dom_load=performance.timing.domComplete -performance.timing.navigationStart;
alert('页面加载时间为：'+dom_load);
}
</script>
这样就OK了，我们甚至可以得到更多关于页面加载的详细信息，W3C官网提供了如下可供我们获取的页面信息图示：
这张图片所提供的功能就叫导航计时（Navigation Timing）,是HTML5提供的一组新API，已经在最新版的浏览器中实现了，但是不兼容低版本IE，如果大家对web前端性能比较感兴趣，可以访问W3C提供的官方文档对其进行探究：
http://www.w3.org/TR/navigation-timing/
利用Navigation Timing测量页面加载时间的更多相关文章
- [转载]Python & Selenium -- 页面加载时间过长&启动指定FF
原文链接:https://my.oschina.net/u/2344787/blog/400507?p={{page}} 1. selenium webdriver在get方法会一直等待页面加载完毕才 ...
- Selenium WebDriver- 指定页面加载时间
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...
- selenium学习笔记11——driver.get(url) 页面加载时间太长
在执行自动化测试用例过程中,发现因为网络慢或其他原因导致driver.get(url) 时,页面一直在加载,页面没有加载完成就不会去继续执行下面的动作,但是实际上需要操作的元素已经加载出来了. 解决方 ...
- selenium学习笔记——driver.get(url) 页面加载时间太长
# 两个同时设置才行 # 实现效果:加载状态停止,进行代码下一步操作 driver.set_page_load_timeout(10) driver.set_script_timeout(10) # ...
- web开发的性能准则（减少页面加载时间方面）
准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...
- 我是如何将页面加载时间从6S降到2S的？
写在前面 生活在信息爆炸的今天,我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的,这就意味着用户对你站点投入的时间可能是及其吝啬的(当然有一些刚需站点除外). 如何给用户提供迅速的响应就显得十 ...
- 使用Filter跟踪Asp.net MVC页面加载时间
最近,客户一直反馈系统使用慢,有时候能够指出具体是哪个页面,有时候又只是笼统地反馈慢.这种问题就像是幽灵一样,非常不好处理.因为导致这种问题的因素非常之多,而且在开发工程中,很难模拟出实际运行是的环境 ...
- performance.timing检测页面加载速度
with(performance){ readyStart = timing.fetchStart - timing.navigationStart; redirectTime = timing.re ...
- 将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间
以下代码: //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/ ...
随机推荐
- Java多线程4：synchronized锁机制
脏读 一个常见的概念.在多线程中,难免会出现在多个线程中对同一个对象的实例变量进行并发访问的情况,如果不做正确的同步处理,那么产生的后果就是"脏读",也就是取到的数据其实是被更改过 ...
- SpeechLib 语音播报
SpeechLib这的dll专门用来播放语音,能够识别英语.简体和繁体.并且可以播放声音文件,支持WAV格式,但不支持MP3.在报警场合下已经够用了. 基本播放语音及文件.支持异步. using Sy ...
- [.net 面向对象编程基础] (23) 结束语
[.net 面向对象编程基础] (23) 结束语 这个系列的文章终于写完了,用了半个多月的时间,没有令我的粉丝们失望.我的感觉就是一个字累,两个字好累,三个字非常累.小伙伴们看我每篇博客的时间就知道 ...
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
- 统计第一个空字符前面的字符长度（java实现）
举例来说:char buf[] = {'a','b','c','d','e','f','\0','x','y','z'}当输入N=10或20,期待输出是6:当输入N=3或5,期待输出是3或5. pac ...
- Windows 10 下安装 npm 后全局 node_modules 和 npm-cache 文件夹的设置
npm 指 Node Package Manager,是 Node.js 中一个流行的包管理和分发工具.Node.js 在某个版本的 Windows 安装包开始已经加入了 npm,现在可以进入 htt ...
- Linux创建用户(转)
这篇文章总结的太好了,让我没动力新写一篇了,啊哈哈哈哈. 源自:http://www.cnblogs.com/ylan2009/articles/2321177.html Linux 系统是一个多用户 ...
- 说说设计模式~门面模式(Facade)
返回目录 门面模式(Facade)属于结构型模式的一种,它符合面向对象的封装原则,但又不符合开闭原则,呵呵,今天我们主要说它的优点,不谈缺点. 定义 门面模式,是指提供一个统一的接口去访问多个子系统的 ...
- Atitit 基于图片图像 与文档混合文件夹的分类
Atitit 基于图片图像 与文档混合文件夹的分类 太小的文档(txt doc csv exl ppt pptx)单独分类 Mov10KminiDoc 但是可能会有一些书法图片迁移,因为他们很微小,需 ...
- iOS-Objective-C内存管理
内存管理: 栈区 [stack]:由编译器自动分配并释放,一般存放函数的参数值,局部变量等 堆区 [heap]:由程序员分配和释放,如果程序员不释放,程序结束时,可能会由操作系统回收 全局区(静态区) ...