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>
![http://www.mozilla.org/images/mozilla-banner.gif"](http://www.mozilla.org/images/mozilla-banner.gif"){kind=link}