js中页面加载时间，js页面加载事件

js获取网页加载的时间

即使不考虑这个因素，通过js来获取页面刚开始加载的时间和加载完成的时间，在进行对比，难度是比较大的。毕竟js需要自己获取自己的状态，这个真不好办。

一般来说，系统时间就是服务器时间。js可以通过ajax直接获取服务器时间。

比如web performance api上的数据），可以自己写，也可用我写的这个库：http：//github.com/hax/WebPerf （有基本的兼容处理，但优化不够，所以我们自己只取样5%~10%的用户加载这个脚本。下个月我还会抽时间改进）。

进入要查看的网页，例如：zhidao.baidu.com。键盘按F12，会调出开发者工具，点击“Network”标签页。键盘按“F5”键以刷新页面，此时从开发者工具可以看到各个资源（例如图片、css文件、js文件）的加载花费时间。

相关问答

Q1: JS影响页面加载速度吗

Js的加载速度只和Js文件大小和Js代码复杂度有关，不管是内部加载还是外部加载都需要用UI线程；不过目前外部Js的加载可以设置异步加载，这样就不会占用UI主线程，不中断UI线程的话页面就会很快响应了。

优化网站尽量用语义化代码进行书写，并将代码与样式分离，除去语义化代码之外还有js的使用，js过多导致文件大会影响网站加载速度，js代码统一放在js文件中，不必要js文件选用延时加载。

JS文件的大小对于网页性能来说非常重要。如果JS文件过大，会导致网页加载速度变慢，用户体验也会受到影响。而JS压缩可以减小文件大小，提高网页的加载速度。

例如React.js的源文件有610k左右，uglify之后已经不到200k了，再通过nginx压缩一把，用户在浏览器下载时，只有40k左右了。

有一定影响的，加载速度会慢。js过多既延长了用户的等待时间，又大量消耗cpu。而且放在页面的前面的话，会影响页面渲染造成用户体验很差，用户会感觉东西迟迟没有出来 。

Q2: 请问用JS怎么获取网页加载完成所需时间?

1、即使不考虑这个因素，通过js来获取页面刚开始加载的时间和加载完成的时间，在进行对比，难度是比较大的。毕竟js需要自己获取自己的状态，这个真不好办。

2、一般来说，系统时间就是服务器时间。js可以通过ajax直接获取服务器时间。

3、vue通过调用函数知道页面最后渲染完成的时间。

4、首先，打开chrome浏览器，进入要查看的网页，例如：zhidao.baidu.com。键盘按F12，会调出开发者工具，点击“Network”标签页。

5、按F12 比如Chrome浏览器 点击network，如果网页全部加载完成会显示 调试框的最下面会显示DOMContentLoaded 12s. 后面跟多少秒。是加载整个网页使用的时间。

Q3: html5页面怎么延迟加载js文件

在JavaScript中，实现延迟加载的方式通常使用setTimeout()函数或setInterval()函数。使用setTimeout()函数延迟加载时，可以设置一个定时器来延迟加载js文件。

while(start + 5000 Number(new Date())){//执行JS}这段代码将使JS执行5秒才完成！JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。

async属性script src=file.js async /scriptasync属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

如果放入html的head中，则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

JS文件位置调整 既然JS文件放在前面后延迟后面代码的加载，那么我们可以考虑将JS放在/body前或更厚，这样就可以让script前的html完美的呈现，不会让用户看到空白页面，提高了体验度。

用负载均衡动静分离，网站人多，静态文件可以考虑用cdn加速。

Q4: 页面加载完成后等待一段时间在执行js的方法,时间如何设定

1、js如何设定窗口弹出时间 使用setTimeout 函数。用法：setTimeout(function，time)；其中function是匿名方法或者方法名称，time是毫秒数即多少毫秒后执行前面的方法。

2、js不能直接让运行中的js代码停在某一步等待一段时间后继续向后执行。但可以使用setTimeout或setInterval可以让js在需要的时候启动一个定时器。需要延迟运行的代码放到setTimeout或setInterval块内即可。

3、异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

js中页面加载时间的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js页面加载事件、js中页面加载时间的信息别忘了在本站进行查找喔。