Question

js获取网页加载的时间

要写一个网页加载进度条，需要获取网页加载完成的时间

Answer 1

<script>
    var start_time = new Date();
    var end_time = "" ;
    var t = setInterval(function(){
        if(document.readyState=="complete"){aa();}
    },500)
 
    function aa(){
        end_time = new Date();
        alert(end_time.getTime() -  start_time.getTime() );
        clearInterval(t);
    }
</script>

追问

看过这段代码，没看明白

Answer 2

楼上的方法挺巧的，不过我觉得start_time应该先getTime，否则Date函数是随着时间流动在变的。建议这样
<script>
var start_time = (new Date()).getTime();
var end_time = "" ;
var t = setInterval(function(){
if(document.readyState=="complete"){aa();}
},500)

function aa(){
end_time = (new Date()).getTime();
alert(end_time - start_time);
clearInterval(t);
}
</script>

追问

能不能讲下原理，没看明白，我想要设置一个加载动画的时间，这个时间就是网页从请求到加载完成的时间，我应该用哪个值

追答

用end_time-start_time就好，document.readyState这个用来监控网页是否完全加载完成，楼上哥们设置了个定时执行，每0.5秒执行一次看看网页载完没 如果触发载完就执行aa函数，函数里把当前的时间戳获取，减去刚开始初始化的那个时间戳，就是整个网页加载的时间。不过如果你是想加载的过程用动画显示的话，那这个方法略蛋疼，因为只能通过离散来计算平均载入网页时间了，因为这个方法只有网页都载入完成了才会获取到这个时间。如果只是静态动画的话，可以放这个静态动画，然后等document.readyState状态变化为complete后把全局动画隐藏。这个动画可以用flash可以用html5，遮住就行。但是如果是进度条的话，最好的办法是用离散计算时间，离散平均时间内载完的话去掉动画不影响用户体验，离散平均时间过后只能说对方网速慢，这样也可以忍受。

追问

我想要用进度条，那这个离散时间应该怎么用呢？

追答

写完这个函数在你的页面的最后，然后把alert的时间都记录下来存到本地数据库，之后用数据库函数计算一下平均时间

追问

那都是本地的呀，和网上访问的时间会相差很多，网页上有很多大图片和flash文件，这么算估计不行啊

追答

扔到测试环境上跑。。大图片真心只能这样，毕竟512k网速跟20M网速区别很大的

Answer 3

js并不能实现如此的功能。
因为js文件本身就是被加载进来的，所以当js文件未被加载的时候，它是无法对之前加载进来的文件进行监控的，也就是说js只能在自己已经被加载进来之后，对再次被加载进来的文件进行操作。
同时一般的js文件在页面的dom树加载完毕后就可以进行操作了，而当dom数被加载完毕时其中的内容图片等都可能没有被加载完毕，所以js无法实现此功能。

Answer 4

网上代码很多吧，这种