javascript - 计算动态创建的Div元素和所有子元素的加载时间

我想计算所有子元素动态创建的div元素的加载时间。我有一个按钮，此按钮的onclick，将100个图像和诸如click，mouseover，mouseleave.mousemove之类的侦听器添加到图像元素。

因此，我想知道为div花费了多少时间（例如dom创建和追加时间，图像加载时间以及事件侦听器注册时间），以准备进行用户交互。

为此，我尝试了在加载所有图像之前执行的console.time（“ loadTime”）和console.timeEnd（“ loadTime”）。

我正在寻找与div元素的window.load事件相同。

 $(document).ready(function(){
        $("#addImg").click(function(){
            $("#imgContainer").empty();
            console.time("loadTime");
            var div = document.createElement('div');
            $("#imgContainer").append(div);
            for(var i=1;i<100;i++){
                var img = document.createElement('img');
                img.src = "http://placehold.it/120x120&text=image"+i;
                img.alt = 'post';
                img.className = 'img-responsive';
                img.addEventListener('click',function(){
                    alert("EVent Clicked");
                });
                img.addEventListener('mouseover',function(){
                    console.log("mouseover");
                });
                img.addEventListener('mouseleave',function(){
                    console.log("mouseleave");
                });
                img.addEventListener('mousemove',function(){
                    console.log("mousemove");
                });
                div.append(img);
             }
             console.timeEnd("loadTime");

        });
    });

我也在jsfiddle中做了同样的事情。

https://jsfiddle.net/aprakash290/31h2sbjz/2/

最佳答案

要知道何时所有图像都已加载，可以使用load事件。当此事件在图像上触发时，将增加一个计数。当此计数与已知图像数匹配时，您就知道它们已全部加载，可以调用console.timeEnd()。

请尝试下面的示例，但是请注意，由于图像将被缓存，因此第二次调用会更快。您将需要修改URL或清除缓存以再次查看完整的加载时间。

$(document).ready(function() {
  $("#addImg").click(function() {
    $("#imgContainer").empty();
    console.time("loadTime");

    var loadedCount = 0;
    var div = document.createElement('div');
    $("#imgContainer").append(div);

    for (var i = 1; i < 100; i++) {
      var img = document.createElement('img');
      img.src = "http://placehold.it/120x120&text=image" + i;
      img.alt = 'post';
      img.className = 'img-responsive';
      img.addEventListener('click', function() {
        alert("EVent Clicked");
      });
      img.addEventListener('mouseover', function() {
        console.log("mouseover");
      });
      img.addEventListener('mouseleave', function() {
        console.log("mouseleave");
      });
      img.addEventListener('mousemove', function() {
        console.log("mousemove");
      });
      img.addEventListener('load', function() {
        loadedCount++;
        if (loadedCount == 99) {
          console.timeEnd("loadTime");
        }
      });
      div.append(img);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addImg"> Append Image</button>
<h2>Image Test</h2>
<div id="imgContainer"></div>

但是，值得注意的是，如果性能是一个主要问题，则根本不应该使用jQuery。

另外，请勿将事件处理程序单独应用于图像。对于分配给父元素的每种事件类型，请使用单个委托的事件处理程序。这是一个执行此操作的示例：

var container = document.querySelector('#imgContainer');

document.querySelector('#addImg').addEventListener('click', function() {
  container.innerHTML = '';
  console.time("loadTime");

  var loadedCount = 0;
  var div = document.createElement('div');
  div.addEventListener('click', function(e) {
    if (e.target.tagName === 'IMG')
      console.log("click");
  });
  div.addEventListener('mouseover', function(e) {
    if (e.target.tagName === 'IMG')
      console.log("mouseover");
  });
  div.addEventListener('mouseleave', function(e) {
    if (e.target.tagName === 'IMG')
      console.log("mouseleave");
  });
  div.addEventListener('mousemove', function(e) {
    if (e.target.tagName === 'IMG')
      console.log("mousemove");
  });

  container.appendChild(div);
  var cacheBreaker = new Date().getTime();

  for (var i = 1; i < 100; i++) {
    var img = document.createElement('img');
    img.src = "http://placehold.it/120x120&text=image" + cacheBreaker + i;
    img.alt = 'post';
    img.className = 'img-responsive';
    img.addEventListener('load', function() {
      loadedCount++;
      if (loadedCount == 99) {
        console.timeEnd("loadTime");
      }
    });
    div.append(img);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addImg"> Append Image</button>
<h2>Image Test</h2>
<div id="imgContainer"></div>

关于javascript - 计算动态创建的Div元素和所有子元素的加载时间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57821068/