window.performance的buffer限制

问题背景:
打开浏览器之后，打开某网站首页，在console里输入

var resources = performance.getEntriesByType("resource")

希望得到页面内所有资源文件的加载时间。

然后将resources打印出来，满怀信心的从html代码里跳出一个图片的url，结果在打印结果中找不到。为什么？
原来这个东西有bufferSize的限制。页面中的资源数量超过了150，因此performance装不下了。

简单的解决办法是，在页面加载的初始阶段，对buffer进行扩容：

...
...

如果我们无法控制html文件，就要在注入的脚本伊始，加入上面的代码。

另外，为什么有的资源信息在不扩容的情况下始终找不到？实验下来的直观印象，是performance记录资源的工具，大概是以队列的形式实现的。也就是先进先出。当资源在页面比较靠前时，这个资源的信息，就被后面的数据顶出了数组......

Paste_Image.png