页面加载时间判断

最新推荐文章于 2022-04-13 17:22:33 发布

iteye_11910

最新推荐文章于 2022-04-13 17:22:33 发布

阅读量296

点赞数

文章标签：前端加载时间 ViewUI

本文链接：https://blog.csdn.net/iteye_11910/article/details/82098148

版权

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>

iteye_11910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面加载时间判断

javascript计算页面加载时间，代码如下： view sourceprint? Calculating Page Loading Time //calculate the time before calling the function in window.onload beforeload = (new Date()).getTime(); fu...
复制链接

扫一扫