最近在看一本名为《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. js只需5分钟创建一个跨三大平台纯原生APP

    DeviceOne之前介绍过了,现在来介绍一下DeviceOne快速开发到什么程度 使用js只需要5分钟就可以打出垮Android.ios.windows三大平台的纯原生UI的安装包. 只需要6个小时 ...

  2. 如何为编程爱好者设计一款好玩的智能硬件（七）——LCD1602点阵字符型液晶显示模块驱动封装（上）

    当前进展: 一.我的构想:如何为编程爱好者设计一款好玩的智能硬件(一)——即插即用.积木化.功能重组的智能硬件模块构想 二.别人家的孩子:如何为编程爱好者设计一款好玩的智能硬件(二)——别人是如何设计 ...

  3. Unity3D使用经验总结 编辑器扩展篇

    一个引擎,最重要的就是工具,工具除了提升开发速度,提供可视化操作环境以外,还带了容错功能. 它使得大家的工作局限在一定的范围内,比如一个变量的配置,或者是一些类型的选择. 使用编辑器,使得既使不太明白 ...

  4. [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之网格Meshes

    [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之网格Meshes 本篇分享一下第5个已完工的视频,即<beginner Graphics – ...

  5. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  6. hibernate HQL和Criteria

    package com.test; import java.util.Date; import java.util.List; import org.hibernate.Query; import o ...

  7. swift 加载 storyboard 里的UIViewController

    let storyBoard:UIStoryboard! = UIStoryboard(name: "Main", bundle: nil) let deskVC:DeskView ...

  8. Bootstrap~多级导航（级联导航）的实现

    回到目录 在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://v ...

  9. 02- Shell脚本学习--运算符

    Shell运算符 Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 aw ...

  10. Atitit 图像处理之理解卷积attilax总结

    Atitit 图像处理之理解卷积attilax总结 卷积的运算可以分为反转.平移,相乘,求和.        在图像处理中,图像是一个大矩阵,卷积模板是一个小矩阵.按照上述过程,就是先把小矩阵反转,然 ...