在 html 页面运行时在 javascript 中解析待处理的外部资源？答案

【问题标题】：Parse pending external resources in javascript at the runtime of a html page?在 html 页面运行时在 javascript 中解析待处理的外部资源？
【发布时间】：2016-01-08 02:49:47
【问题描述】：

问题：

我怎么能说在javascript中计算页面正在生成的待处理资源的总数？

GetEntriesByType 以下是包含一些图像和 http 请求的页面的快速摘要：

<div id="results"></div>
<img src="http://placekitten.com/g/200/100" alt=""/>  //resource 1
<img src="http://placekitten.com/g/240/500" alt=""/>  //resource 2
<img src="http://placekitten.com/g/210/300" alt=""/>  //resource 3
<img src="http://placekitten.com/g/500/300" alt=""/>  //resource 4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>  //resource 5
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>  //resource 6
<script>
  var results = document.getElementById('results');
  var r = new XMLHttpRequest();
  r.open("GET", "http://www.filltext.com?rows=10&f={firstName}", true);
  r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return;
    var data = JSON.parse(r.responseText);
    for (i = 0; i < data.length; i++) {
      results.innerHTML += '<li>' + data[i].f + '</li>'
    }
  };
  r.send(); //resource 7
  var hey = window.performance.getEntriesByType("resource");
  console.log(hey);  //returns 0 :( which I hope would be 7 before dom renders.
</script>

【问题讨论】：

你说的资源，是CDNJS还是r.open你做的？
XMLHttpRequest 是异步的，所以最后两行代码在通过 xhr 加载任何内容之前运行。
任何发出 http 请求的东西。脚本、图像、ajax 等
我读到 getEntriesByType 应该可以工作但没有:(
此外，我已经对问题进行了注释以提供帮助。

标签： javascript image http request xmlhttprequest

【解决方案1】：

为@Jaromanda +1。

试试这个：

setTimeout(function(){
  var hey = window.performance.getEntriesByType("resource");
  console.log(hey);
}, 0);

http://jsfiddle.net/8bgwma8n/1/

【讨论】：