window.performance的buffer限制

问题背景:
打开浏览器之后,打开某网站首页,在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记录资源的工具,大概是以队列的形式实现的。也就是先进先出。当资源在页面比较靠前时,这个资源的信息,就被后面的数据顶出了数组......

Paste_Image.png

推荐阅读更多精彩内容