页面加载时间判断

fengbin2005

浏览: 1741124 次

最近访客更多访客>>

mhx1535

aininim

huangyongxing310

chenjinbo1983

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前端加载时间

javascript计算页面加载时间，代码如下：

view source
print?
<html><head>
<title>Calculating Page Loading Time</title>
<SCRIPT LANGUAGE="JavaScript">
//calculate the time before calling the function in window.onload
beforeload = (new Date()).getTime();
function pageloadingtime()
{

     //calculate the current time in afterload
    afterload = (new Date()).getTime();
     // now use the beforeload and afterload to calculate the seconds
    secondes = (afterload-beforeload)/1000;
     // If necessary update in window.status
    window.status='You Page Load took ' + secondes + ' seconde(s).';
     // Place the seconds in the innerHTML to show the results
    document.getElementById("loadingtime").innerHTML = "<font color='red'>(You Page Load took " + secondes + " seconde(s).)</font>";

}

window.onload = pageloadingtime;
</SCRIPT>
</head>
<body >
<table border width=40%>
<tr><td colspan=2><strong>Page Loading Script</strong></td></tr>
<TR>                 <TH> sample </TH> <TH> test</TR>
<TR ALIGN="left">    <TH> Hi 1<BR>bloop </TH> <TH> Head 2 </TR>
<TR VALIGN="bottom"> <TH> test 1<BR>bloop </TH> <TH> Head 2 </TR>
<TR>                 <TH> hi 1<BR>bloop </TH> <TH> Head 2 </TR>
<TR ALIGN="center"> <TD> y<BR>aaaa     </TD> <TD> 4.23   </TR>
<TR ALIGN="right">   <TD> new     </TD> <TD> test</TR>
</table>
<p><div id="loadingtime"></div></p>
</body>
</html>

由于window.onload()在所有页面元素加载完成后执行其函数，所以如果页面元素中存在如过大图片，页面加载速度就有所影响，因此，急需替代函数，如果不用其他js框架，如何解决，后来一搜，发现有人已经解决这事情了。http://www.brothercake.com/site/resources/scripts/domready/

window.onload()的替代函数（不使用JS库）

    博客分类：
    HTML & W3C & DOM

SafariCC++C#XHTML
由于window.onload()在所有页面元素加载完成后执行其函数，所以如果页面元素中存在如过大图片，页面加载速度就有所影响，因此，急需替代函数，如果不用其他js框架，如何解决，后来一搜，发现有人已经解决这事情了。http://www.brothercake.com/site/resources/scripts/domready/。

相当的不错。其源码：

domFunction.js
Js代码收藏代码

    // DF1.1 :: domFunction
    // *****************************************************
    // DOM scripting by brothercake -- http://www.brothercake.com/
    // GNU Lesser General Public License -- http://www.gnu.org/licenses/lgpl.html
    //******************************************************


    //DOM-ready watcher
    function domFunction(f, a)
    {
    //initialise the counter
    var n = 0;

    //start the timer
    var t = setInterval(function()
    {
       //continue flag indicates whether to continue to the next iteration
       //assume that we are going unless specified otherwise
       var c = true;

       //increase the counter
       n++;

       //if DOM methods are supported, and the body element exists
       //(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]
       //in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
       if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null))
       {
        //set the continue flag to false
        //because other things being equal, we're not going to continue
        c = false;

        //but ... if the arguments object is there
        if(typeof a == 'object')
        {
         //iterate through the object
         for(var i in a)
         {
          //if its value is "id" and the element with the given ID doesn't exist
          //or its value is "tag" and the specified collection has no members
          if
          (
           (a[i] == 'id' && document.getElementById(i) == null)
           ||
           (a[i] == 'tag' && document.getElementsByTagName(i).length < 1)
          )
          {
           //set the continue flag back to true
           //because a specific element or collection doesn't exist
           c = true;

           //no need to finish this loop
           break;
          }
         }
        }

        //if we're not continuing
        //we can call the argument function and clear the timer
        if(!c) { f(); clearInterval(t); }
       }

       //if the timer has reached 60 (so timeout after 15 seconds)
       //in practise, I've never seen this take longer than 7 iterations [in kde 3
       //in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]
       if(n >= 60)
       {
        //clear the timer
        clearInterval(t);
       }

    }, 250);
    };

页面使用:
Html代码收藏代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

    <title>domFunction</title>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    
    <script type="text/javascript" src="domFunction.js"></script>
    <script type="text/javascript">


    /*
    function myFunction()
    {
       alert("The DOM is ready");
    };
    var foobar = new domFunction(myFunction, { 'h1' : 'tag'});
    */


    var foobar = new domFunction(function()
    {
       alert("The DOM is ready");

    }, { 'h1' : 'tag' });


    </script>

    </head>

    <body>

    <h1>domFunction</h1>

    </body>
    </html>

很容易理解，作者还有一个简易版本，不过不能检查到某个特定元素，叫domReady.js
Js代码收藏代码

    // DR1.0 :: domReady
    // *****************************************************
    // DOM scripting by brothercake -- http://www.brothercake.com/
    // GNU Lesser General Public License -- http://www.gnu.org/licenses/lgpl.html
    //******************************************************

    //DOM-ready watcher
    function domReady()
    {
    //start or increment the counter
    this.n = typeof this.n == 'undefined' ? 0 : this.n + 1;

    //if DOM methods are supported, and the body element exists
    //(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]
    //in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
    //>>> and any elements the script is going to manipulate exist
    if
    (
       typeof document.getElementsByTagName != 'undefined'
       && (document.getElementsByTagName('body')[0] != null || document.body != null)
       //>>> && document.getElementById('something') != null
    )
    {
    //>>>-- DOM SCRIPTING GOES HERE --<<<


       alert("The DOM is ready!");


    //>>>-----------------------------<<<
    }

    //otherwise if we haven't reached 60 (so timeout after 15 seconds)
    //in practise, I've never seen this take longer than 7 iterations [in kde 3.2.2
    //in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]
    else if(this.n < 60)
    {
       //restart the watcher
       //using the syntax ('domReady()', n) rather than (domReady, n)
       //because the latter doesn't work in Safari 1.0
       setTimeout('domReady()', 250);
    }
    };
    //start the watcher
    domReady();

页面使用：
Html代码收藏代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

    <title>domReady</title>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <script type="text/javascript" src="domReady.js"></script>

    </head>

    <body>



    </body>
    </html>

分享到：