在 html 页面运行时解析 javascript 中挂起的外部资源？

Question

问题：

如何计算 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>

Answer 1

@Jaromanda+1。

试试这个：

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

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

在 html 页面运行时解析 javascript 中挂起的外部资源？

Parse pending external resources in javascript at the runtime of a html page?

javascript

image

http

xmlhttprequest

request

问题：