Mal schauen, der Quellcode von html2canvas ist gut sortiert.
Die mit Abstand meiste Zeit (ca. 2/3 der aktuellen freezetime) geht bei einer tree parser function drauf, bei der vom Root Node rekursiv alle childNodes durchlaufen werden, um sich die geclonten CSS Styles vom DOM abzuholen. Wenn ich es da schaffe, da eine Coroutine einzubauen, dann wäre schon sehr viel geholfen. Es gibt danach noch eine rendering function (ca. 1/3 freezetime), die habe ich noch nicht ganz verstanden, aber soweit ich es überflogen habe, könnte man die sogar in einen web worker auslagern, der dann stetig an den main thread funkt, um das canvas zu zeichnen.
Eine andere Lösung wäre, die html2canvas lib komplett umzuschreiben, sodass html2canvas in einem web worker arbeitet und die benötigten DOM Informationen immer bei Bedarf vom main thread anfragt. Müsste so funktionieren:
- Klone das gewünschte HTMLFragment im DOM (html2canvas macht das über einen iframe)
- Vergebe jedem Element im geklonten HTMLFragment eine id
- Übergebe das geklonte HTMLFragment als OuterHTML an den web worker
- Erstelle ein js dom des HTMLFragments im worker (z.B. mit parse5) und starte html2canvas
- bei Bedarf DOM Information für ein Element vom Main Thread über die id anfragen.
- Erstelle OffscreenCanvas im Main Thread
- Sende Canvas Information an Main Thread. ...
Dies scheint mir die elegantere Lösung, allerdings müsste ich da viel Hand an html2canvas anlegen und die ganzen HTML types neu definieren. Ziemlich viel Holz.
Michael