最近在看一本名为《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测量页面加载时间的更多相关文章

  1. [转载]Python & Selenium -- 页面加载时间过长&启动指定FF

    原文链接:https://my.oschina.net/u/2344787/blog/400507?p={{page}} 1. selenium webdriver在get方法会一直等待页面加载完毕才 ...

  2. Selenium WebDriver- 指定页面加载时间

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

  3. selenium学习笔记11——driver.get(url) 页面加载时间太长

    在执行自动化测试用例过程中,发现因为网络慢或其他原因导致driver.get(url) 时,页面一直在加载,页面没有加载完成就不会去继续执行下面的动作,但是实际上需要操作的元素已经加载出来了. 解决方 ...

  4. selenium学习笔记——driver.get(url) 页面加载时间太长

    # 两个同时设置才行 # 实现效果:加载状态停止,进行代码下一步操作 driver.set_page_load_timeout(10) driver.set_script_timeout(10) # ...

  5. web开发的性能准则（减少页面加载时间方面）

    准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...

  6. 我是如何将页面加载时间从6S降到2S的？

    写在前面 生活在信息爆炸的今天,我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的,这就意味着用户对你站点投入的时间可能是及其吝啬的(当然有一些刚需站点除外). 如何给用户提供迅速的响应就显得十 ...

  7. 使用Filter跟踪Asp.net MVC页面加载时间

    最近,客户一直反馈系统使用慢,有时候能够指出具体是哪个页面,有时候又只是笼统地反馈慢.这种问题就像是幽灵一样,非常不好处理.因为导致这种问题的因素非常之多,而且在开发工程中,很难模拟出实际运行是的环境 ...

  8. performance.timing检测页面加载速度

    with(performance){ readyStart = timing.fetchStart - timing.navigationStart; redirectTime = timing.re ...

  9. 将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间

    以下代码: //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/ ...

随机推荐

  1. GitHub的多人协同开发配置

    GitHub For Windows 下载地址:https://windows.github.com/ 基本的注册登录就不细讲了. 在源代码管理上,最重要的就是仓库了.仓库这一概念很容易理解,所谓仓库 ...

  2. 分布式系统一致性问题和Raft一致性算法

    一致性问题 一致性算法是用来解决一致性问题的,那么什么是一致性问题呢? 在分布式系统中,一致性问题(consensus problem)是指对于一组服务器,给定一组操作,我们需要一个协议使得最后它们的 ...

  3. RCP：利用actionSet在菜单（menu）里添加内容

    eclipse的菜单menu.工具栏toolbar乃至视图的上下文菜单contextmenu都是使用Action或Command实现的. Action即是 org.eclipse.jface.acti ...

  4. 分享一些Hadoop环境搭建所用到的软件

    本来想用土的掉渣的语言说说hadoop配置的,因为最近总有人问我,环境搭建老出莫名其妙的问题,可是写到一半,还是决定不写了,网上教程好多好多,而大家遇到问题有很多是软件版本不对应造成的,因此我就把大家 ...

  5. JavaScript包装对象

    JavaScript是面向对象的语言,使用”.”操作符可以访问对象的属性和方法,而对于基本类型(null, undefined, bool, number, string)应该是值类型,没有属性和方法 ...

  6. 知方可补不足~sqlserver中使用sp_who查看sql的进程

    回到目录 在SQLSERVER中每个会话,即每个查询分析器窗口都会产生一个SQL进程,对于那些持续时间短的进程,它们转瞬即失,而对于持续时间比较长的,我们需要希望查看它的运行状态,就可以借助SQL提供 ...

  7. EF架构~在global.asax里写了一个异常跳转，不错！

    回到目录 一般地,网站出现异常后,我们会通过设置web.config的方法来实现友好页的显示,这个方法比较常用,但捕捉的信息不是很具体,在程序测试阶段,我们可以通过global.asax来实现友好的, ...

  8. paip.解决access出现 -2147467259 无效的参数量

    paip.解决access出现 -2147467259   无效的参数量 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http: ...

  9. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

  10. WPF中关于自定义控件的滚动条鼠标停留在内容上鼠标滚轮滚动无效的问题

    问题起因:在一个用户控件里放置了1个TreeView垂直顺序放置. 当用户控件中的内容超过面板大小时,滚动条会自动出现 ,但是只有当鼠标指示在右边滚动条的那一条位置时,才支持鼠标滚轴滚动. 点在控件内 ...