[英]How to find page rendering time(not page loading time) using javascript
[英]how to calculate image loading/rendering time in javascript?
有什么方法可以使用 javascript/jquery 在网页中找到图像加载/渲染时间?
正确的答案是使用内置于 Chrome 或 Firefox/Firebug 等浏览器中的开发工具,它会告诉您加载页面中的所有资源需要多长时间。 这些工具可以访问纯 javascript 可以访问的更多信息。
使用 javascript,您可以精确地加载使用 javascript 指定的图像。 您不能使用 javascript 来精确计时在 HTML 中指定的图像的加载时间,因为没有精确的方法在图像开始加载的那一刻开始 javascript 时间测量。
对 javascript 中指定的图像计时:
var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
var loadtime = new Date().getTime() - startTime;
console.log("image took " + loadtime + "ms to load");
};
img.src = "http://www.whatever.com/testimg.jpg";
对于 HTML 中指定的图像,您可以做的最好的事情是:
<script>
var startTime = new Date().getTime();
function doneLoading() {
var loadtime = new Date().getTime() - startTime;
console.log("image took " + loadtime + "ms to load");
};
</script>
<img src="http://www.whatever.com/testimg.jpg" onload="doneLoading()">
前面示例中的<script>
标签需要紧邻<img>
标签。
但是说真的,使用 Chrome 或 Firebug 中的开发工具,您可以准确地看到所有页面资源加载所需的时间。
var resourceList = window.performance.getEntriesByType("resource");
for (i = 0; i < resourceList.length; i++)
{
if (resourceList[i].initiatorType == "img")
{
alert("End to end resource fetch: "+ (resourceList[i].responseEnd - resourceList[i].responseStart ));
}
}
https://jsfiddle.net/q4euntat/5/
您可以参考上面的链接,在 jsfiddle 上实现它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.