利用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/ ...
随机推荐
- nginx（4、缓存）
nginx提供内置的缓存功能,对静态文件,如html\css\js等能够缓存在本地,即nginx服务器的某个目录下. 其配置主要是两部分: 1.在http下配置一个缓存路径: proxy_cache_ ...
- STC12C5A60S2笔记1（管脚定义）
STC12C5A60S2管脚定义 管脚1:标准IO口P1.0.ADC0 模数转换通道0.CLKOUT2 波特率发生器的时钟输出 管脚2:标准IO口P1.1.ADC1 模数转换通道1 管脚3:标准IO口 ...
- ReentrantLock实现原理深入探究
前言 这篇文章被归到Java基础分类中,其实真的一点都不基础.网上写ReentrantLock的使用.ReentrantLock和synchronized的区别的文章很多,研究ReentrantLoc ...
- 设计模式之美：State（状态）
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):由 ConcreteState 指定它的后继 State. 意图 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改 ...
- java提高篇(一)-----理解java的三大特性之封装
从大二接触java开始,到现在也差不多三个年头了.从最基础的HTML.CSS到最后的SSH自己都是一步一个脚印走出来的,其中开心过.失落过.寂寞过.虽然是半道出家但是经过自己的努力也算是完成了“学业” ...
- xamarin UWP平台下 HUD 自定义弹窗
在我的上一篇博客中我写了一个在xamarin的UWP平台下的自定义弹窗控件.在上篇文章中介绍了一种弹窗的写法,但在实际应用中发现了该方法的不足: 1.当弹窗出现后,我们拖动整个窗口大小的时候,弹窗的窗 ...
- WebApi系列~StringContent参数需要添加MetaType对象
回到目录 对于api调用已经很多见了,在客户端去post一个请求到API服务端也是经常见到,但有时不注意,可能会引起一些问题,如为一个HttpContent参数进行赋值时,如果使用StringCont ...
- SQLServer数据库还原提示 数据库正在使用，无法获得独占访问权
还原数据库的时候提示下图的错误:
- Liferay7 BPM门户开发之37: Liferay7下的OSGi Hook集成开发
hook开发是Liferay客制扩展的一种方式,比插件灵活,即可以扩展liferay门户,也能对原有特性进行更改,Liferay有许多内置的服务,比如用hook甚至可以覆盖Liferay服务. 可作为 ...
- KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法
注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...