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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容