如何计算首屏时间？

[张吉Jerry]

如题，这个时间应包括首屏HTML、CSS、JS以及首屏图片的加载时间。
谢谢。

[hellNo]

global.asax: 

<script   language= "C# "   runat= "server "> 
        DateTime   dt; 
        void   Application_BeginRequest(Object   sender,   EventArgs   E)   { 
        dt   =   DateTime.Now; 
        } 
        void   Application_EndRequest(Object   sender,   EventArgs   E)   { 
        TimeSpan   ts   =   DateTime.Now   -   dt; 
        Response.Write( "processing   time: "   +   ts.Ticks   +   "   ticks <BR> "); 
        Response.Write( "processing   time: "   +   ts.TotalMilliseconds   +   "   ms "); 
      } 

</script> 

[hellNo]

在页面Head部分加入初始时间
复制代码 代码如下:
在Body中加入
复制代码 代码如下:
<script language=javascript>
var t1 = new Date().getTime();
</script>

<SCRIPT LANGUAGE="JavaScript">
window.onload = function()
{
document.getElementById("TimeShow").innerHTML = "加载本页耗时 "+ (new Date().getTime()-t1) +" 毫秒";
}
</SCRIPT>
//在需要显示的地方插入一个ID为TimeShow的标签即可
<div id="TimeShow"></div>

protected DateTime dt; 
protected void Page_Load(object sender, EventArgs e) 
{ 
} 
protected override void OnPreInit(EventArgs e) 
{ 
dt = DateTime.Now; 
base.OnPreInit(e); 
} 
protected override void OnLoadComplete(EventArgs e) 
{ 
base.OnLoadComplete(e); 
TimeSpan ts = DateTime.Now - dt; 
Response.Write("加载页面用时：" + ts.TotalMilliseconds); 
} 

[张吉Jerry]

谢谢回复，但是我要计算的是首屏加载时间，而非整个页面的加载时间。

[Mr-Jee]

其实如果你知道lazyload的话 那就一切都容易搞定了
去查下lazy load吧
不过我想说下。因为img肯定是偏最后加载的，因此这个意义不是很大吧 除非是很庞大的图片群 页面

[毛飞扬___It跑路男]

开头一个 new Date 结束一个new Date

[碧海情天-赵亮]

可以把首屏内容提出来成单独一个页面再统计，然后在这个结果上根据本来页面的整体内容乘一个大于1的系数。

[碧海情天-赵亮]

不过上面的方法，不精确，因为脱离了原始的整体文档，反映不了当时的实际。

如果要尽量真实点，可以就在原来的文档里，TITLE部分加一个JS函数取当前时间，然后对首屏的内容里面的图片标签加入onload事件，在里面进行计数统计和判断，当计数值达到预期的所有首屏图片数量之和时，代表所有图片都加载完成，此时再取当前时间与原来的时间进行比较，就能得到大体合适的时间了。因为，图片加载速度是最后的，它全完成，基本就代表全完成了。

[碧海情天-赵亮]

上面方法的结果，因为多了一些onload时要执行的统计代码，所以时间相对要多一点，不过因为执行到TITLE部分取时间的函数的时候，也是发生在加载执行HTML以后的，所以大体可以抵消，而且这些时间都相对较少，所以不必很精确地比较谁真的多多少。

[zjhsd2007]

用户的显示器大小不一样，首屏显示的内容多少也不一样，虽然你可以获取屏幕大小，但想确定首屏的加载时间难度太大，几乎不太可能，换个思路去实现你想要的效果吧。