使用javascript进行基准图像显示时间

Question

我希望能够对浏览器从内存中获取图像并在页面上显示的时间进行基准测试，最好只使用JS。

我最初的想法是将4000x4000图像加载到JS图像对象中，然后计算将图像附加到div（然后将其删除）100次所需的时间。将粘贴我用于执行此操作的脚本。

我的问题是它似乎在2毫秒内非常快地进行100次迭代，这看起来比应该能够做到的要快。我猜这是因为某种缓存，或者因为实际的显示被移交给一个单独的线程而且这个JS线程能够异步进行。

任何人都知道发生了什么事吗？你能建议一个更好的方法吗？

谢谢！

<script>
var img = new Image();
img.src = "http://path/to/image.jpg";

img.onload = function() {

    var div = document.getElementById('image');
    var d, start, total;

    d = new Date();
    start = d.getTime();

    for (i = 0; i < 100; i++) { 

        div.appendChild(img);
        div.removeChild(img);
    }

    d = new Date();
    total = d.getTime() - start;
    console.log(total);
};
</script>
<div id="image"></div>