问题背景:
打开浏览器之后,打开某网站首页,在console里输入
var resources = performance.getEntriesByType("resource")
希望得到页面内所有资源文件的加载时间。
然后将resources打印出来,满怀信心的从html代码里跳出一个图片的url,结果在打印结果中找不到。为什么?
原来这个东西有bufferSize的限制。页面中的资源数量超过了150,因此performance装不下了。
简单的解决办法是,在页面加载的初始阶段,对buffer进行扩容:
<html><head>
<script>
if ("performance" in window
&& window.performance
&& window.performance.setResourceTimingBufferSize) {
performance.setResourceTimingBufferSize(300);
}
</script>
...
</head>...
如果我们无法控制html文件,就要在注入的脚本伊始,加入上面的代码。
另外,为什么有的资源信息在不扩容的情况下始终找不到?实验下来的直观印象,是performance记录资源的工具,大概是以队列的形式实现的。也就是先进先出。当资源在页面比较靠前时,这个资源的信息,就被后面的数据顶出了数组......