问题背景:
打开浏览器之后，打开某网站首页，在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
网友评论