Re: [whatwg] [2D Canvas] Proposal: batch variants of drawImage

The way you measured the JS crossing time does not include parameter
validations if I am not mistaken.  If you have 1000 sprite draws that draw
from the same sprite sheet, that is 1000 times you are verifying the same
image parameter (verifying that the image is complete, that its security
origin does not taint the canvas, fetch the decoded image data, etc.), even
tough most of this stuff is cached, it is being looked up N times instead
of just once.
I will prototype this and come back with some hard data.

On Fri, Aug 8, 2014 at 9:26 PM, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> On 8/8/14, 8:43 PM, Rik Cabanier wrote:
>
>> The problem is that a large number of drawImage calls have a lot of
>> overhead due to JS crossings and housekeeping.
>>
>
> Could we please quantify this?
>
> I measured the "JS crossings" part of this, because it's easy: Just have
> the C++ side of drawImage return immediately.  What I see if I do that is
> that a drawImage call that passes an HTMLImageElement and two integers
> takes about 17ns on my hardware in a current Firefox nightly on Mac.
>
> For scale, a full-up drawImage call that actually does something takes the
> following amounts of time in various browsers I have [1]:
>
> Firefox nightly: ~9500ns/call
> Chrome dev: ~4300ns/call
> Safari 7.0.5 and WebKit nightly: ~3000ns/call
>
> all with noise (when averaged across 100000 calls) that's way more than
> 17ns.
>
> So I'm not sure "JS crossings" is a significant performance cost here. I'd
> be interested in which parts of "housekeeping" would be shareable across
> the multiple images in the proposal and how much time those take in
> practice.
>
> -Boris
>
> [1] The specific testcase I used:
>
> <!DOCTYPE html>
> <img src="http://www.mozilla.org/images/mozilla-banner.gif">
> <script>
>   onload = function() {
>     var c = document.createElement("canvas").getContext("2d");
>     var count = 1000000;
>     var img = document.querySelector("img");
>     var start = new Date;
>     for (var i = 0; i < count; ++i) c.drawImage(img, 0, 0);
>     var stop = new Date;
>     console.log((stop - start) / count * 1e6 + "ns per call");
>   }
> </script>
>

Received on Saturday, 9 August 2014 01:46:50 UTC