最近在做一些性能方面的工作,开始研究一下firebug针对网页性能的强大功能。

今天主要介绍一下console.timeStamp

自从Firebug 1.8b3开始, 引入了一个新的API-console.timeStamp(). 这个API在javascript执行过程中设置时间点,并且在“网络”面板中,和HTTP的请求信息一起显示出来,进行比对。

当开发者需要了解,某段特定的脚本何时开始执行,就可以使用这个功能了。尤其是在一些页面中,用<script>或者XHR动态创建了脚本,或者使用了eval().

偶们来看看使用了time-stamp的截图。

 

同时,time-stamp也在“控制台”面板里面显示,这样开发员可以和其他的log进行比对。

接下去,我们看一下,如何在自己的代码中显示这些信息。

例子中使用的脚本函数
在我们深入了解之前,首先定义一下例子中使用的公用函数

function addExternalScript(url)
{
var script = document.createElement("script");
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function sleep(ms)
{
var now = (new Date()).getTime();
while ((now + ms) > ((new Date()).getTime())){}
}
  • addExternalScript 这个函数创建了一个<script>的元素,并加入到document. 这个元素可以异步加载一个外部的URL。
  • sleep 这个函数指定了JS执行暂停多久,以ms为单位。
Example 1
第一个例子用了console.timeStamp()的最基本的功能。例子请看:firefox_timeStamp1.html
脚本的使用如下
console.timeStamp("Script on the page executed");
sleep(100);
网络面板的显示如下
流程是这样的
  1. 两个请求:example.html和testcase.css
  2. 当CSS文件请求成功之后,页面的脚本也被执行了. 可以看到那根银色的线标示的地方。
  3. 脚本会冻结100ms
  4. 页面触发了DOMContentLoaded事件
  5. 页面触发了load事件
Example 2
这个例子演示了动态创建<script>标签。例子请看:firefox_timeStamp2.html
页面脚本代码如下
console.timeStamp("Script on the page executed");
addExternalScript("example.js");
console.timeStamp("External script added");
sleep(100);
其中example.js里面的代码为
console.timeStamp('External script executed');
sleep(100)";
网络面板的显示如下
流程是这样的
  1. 三个http的请求。example.html,testcase.css和example.js
  2. 和刚才那个例子一样,当页面脚本执行的时候,第一个脚本时间戳”Script on the page executed”会显示出来
  3. 另一个外部脚本添加进来,但是这个是异步加载的,所以我们可以看到,在第一个脚本时间戳之后立刻显示了第二个脚本时间戳”External script add”
  4. example.js开始加载
  5. 页面触发了DOMContentLoad事件
  6. example.js加载好了,并且脚本执行到,于是显示了第三个脚本时间戳”External script executed”
  7. 脚本会冻结100ms
  8. 页面触发了load事件
使用这样的方法,可以查看自己的脚本执行事件。并且在网络面板中还能比对页面的domready和load时间。有兴趣的同学可以尝试一下。

 

英文原版:http://www.softwareishard.com/blog/firebug/firebug-1-8-console-timestamp/

本文作者:admin 转载请注明来自:携程设计委员会