Bad performances ?

[ghost]

Hello, I found your repository 2 days ago and I integrated into an open-source webserver website.

When I click on the menu in the header, the rendering is slow. Sometimes the browser (Chrome for me) randomly crash after I clicked on the button.

This is normal ?

URL:
http://xzero.io

Thanks,

[niklasvh]

Have you tried disabling the blur?

[ghost]

The blur is processed after the generation of the screenshot and it's accelerated by 3D so the problem is not the blur. Here is a screenshot of the js timeline perf when I click on the button: http://puu.sh/4blyf/4f65a59c05.png

These 985ms (and more sometimes) come from your script.

[niklasvh]

From right before calling html2canvas to reaching the onrendered callback, its taking me about 0.25-0.3s (http://i.imgur.com/xngoFbP.png), and that's all the JS execution done.

With this code in there:

   jQuery('section#MLOverlay').show().css({
          'background-image': 'url('+canvas.toDataURL('image/jpeg', 1)+')'
    });

It runs html2canvas, takes another ~15ms each time to compress the image to jpeg/applying blur, and then runs html2canvas again: http://i.imgur.com/79BFXb1.png

So the problem is somewhere in your application.

[ghost]

Fixed: christianparpart/xzero-web@312fb20
Latest revision: http://xzero.elasticbeanstalk.com/

It's still laggy a bit but it's normal I guess ;)

Thanks for helping,

[niklasvh]

Would be faster if you just used canvas.toDataURL(); (which is lossless png), or even better, you would just append the canvas to the page and apply the webkit-filter on the actual canvas. Or even better yet, just apply the filter on the actual DOM elements without creating a canvas of them and then applying a filter :)

[ghost]

My tests show that jpeg with 90% of quality is faster than lossless png.

It don't work when I apply the blur filter on body and the exit effect (when I click on close button) is impossible to create without the plugin.

Thanks anyway ;)

[niklasvh]

Alright :)

[ArcaneEngineer]

Googling "html2canvas slow" turns up several results, and yet this has never been properly addressed by the author, at least through looking into culprit code and understanding why it takes so long and what (if anything) can be done about it, and sharing those details with the community in the interests of a fix.

[niklasvh]

@ArcaneEngineer I am not sure where you gathered that it wouldn't be clear where the bulk of the time for creating a render goes. The reason why it is slow is very clear, that doesn't mean that it could be properly addressed. Firstly, unless you want html2canvas to manipulate almost every single DOM node on your document, it requires the whole DOM to be cloned to a seperate window context where it can freely mutate it without requiring the original to be touched, which in itself already can take ~100ms. Parsing every single DOM node/pseudonode and their computed CSS values and the position on the document takes some time as well, but what really is the performance killer is measuring/rendering text. There are no proper low level APIs that allow you to properly measure text wrapping, or even render with letter spacing, which means that to do letter based rendering you may potentially be required to measure the bounds of every single letter on the document. You could potentially start parsing font files manually and calculate the size of glyphs yourself, but then you would get more issues about why the library is half a mb in size and why the author hasn't properly addressed the size of it.

[ArcaneEngineer]

So the software rendering is the real killer here... is this primarily a per-pixel cost?

I have a minimal test case set up with a single <p> of 300x75 pixel containing 7 characters only and font size 64px, and it takes between 200-400ms to render to canvas on an old E2160 dual core system.

If that sounds normal, then I can narrow down options: optimise your code or process on back end.

[raphaelfavier]

For those stumbling upon this thread years later, consider using html-to-image instead

https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

[webpig]

For those stumbling upon this thread years later, consider using html-to-image instead

https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

html-to-image is good, but it will load all fonts.