0

I hoping to benchmark how long a browser takes to take an image from memory and display it on the page, ideally just using JS.

My initial idea was to load a 4000x4000 image into a JS image object, and then time how long it takes to append the image to a div (and then remove it) 100 times. Will paste the script I'm using to do this below.

My problem is it seems to do the 100 iterations very fast, within 2ms, which seems faster than it should be able to do this. I'm guessing this is because of some sort of caching, or because the actual displaying is being handed off to a separate thread and this JS thread is able to proceed asynchronously.

Anyone know for sure what's going on? Can you suggest a better way of doing this?

Thanks!

<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>
CharlotteS
  • 1
  • As you said, the image is never "loading" - the for loop is simply benchmarking how long it takes to remove and append the node 100 times. – Alex Feb 16 '15 at 13:44
  • Yeah I figured it something like that. It's not the loading that I want to measure though, it's the going from memory to being on screen time. Is there a way of measuring that? – CharlotteS Feb 16 '15 at 14:18
  • The image will probably always be in memory and therefore this approach won't work as expected. I'll try to figure something out if I can. – Alex Feb 16 '15 at 14:24
  • Any suggestions would be very welcome :) – CharlotteS Feb 16 '15 at 14:37
  • Are the requirements running the service from the web through Javascript? – Alex Feb 16 '15 at 20:23
  • Is it from memory you want to benchmark or is it from start to finish loading (from image file to display - network download and display time)? – Alex Feb 16 '15 at 20:29
  • Possible duplicate of [Javascript callback for knowing when an image is loaded](http://stackoverflow.com/questions/280049/javascript-callback-for-knowing-when-an-image-is-loaded) – Paul Sweatte Dec 13 '16 at 15:26

0 Answers0