利用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/ ...
随机推荐
- webapi 中使用 protobuf
相比json来说,好处是速度更快,带宽占用更小.其效果大致等于json+Gzip. 在webapi中使用protobuf的方法为: 引用nuget包 Install-Package protobuf- ...
- 使用C#开发ActiveX控件（新）
前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力.通常ActiveX控件都是 ...
- [Asp.net 开发系列之SignalR篇]专题五：SignalR支持的平台
SignalR支持多种服务器和客户端配置.此外,每种传输方式都有自身的要求限制:如果某种传输方式不被系统支持,SignalR能够优雅地将故障转移到其他类型的传输方式.关于SignalR所支持的传输方式 ...
- Matrix Admin 后台模板笔记
一个后台模板用久了就想换一个.上次找到了Matrix Admin.和ACE一样都是Bootstrap风格,比较容易上手.Matrix要更健壮些.感觉拿去做用户界面也是可以的. 整体风格: 1.表单验证 ...
- 译文---C#堆VS栈(Part Two)
前言 在本系列的第一篇文章<C#堆栈对比(Part One)>中,介绍了堆栈的基本功能和值类型以及引用类型在程序运行时的表现,同时也包含了指针作用的讲解. 本文为文章的第二部分,主要讲解参 ...
- hadoop 学习笔记：mapreduce框架详解
开始聊mapreduce,mapreduce是hadoop的计算框架,我学hadoop是从hive开始入手,再到hdfs,当我学习hdfs时候,就感觉到hdfs和mapreduce关系的紧密.这个可能 ...
- Java处理Radius access-challenge
最近使用 RSA Authentication Manager, 并且与其自带的Radius server整合, RSA的Radius server 配置不太透明, 目前只配成功了PAP方式的验证,C ...
- javascript日常总结
如何去除掉inline-block元素之间的默认间距 前几天写一个页面 1 2 3 4 div{width:900px;} div li{ display:inline-block; width:30 ...
- 通过 Redis 实现 RPC 远程方法调用(支持多种编程语
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/101.html?1455869487 我发现经常研究并且为之兴奋的一件事就 ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...