bubkoo / html-to-image

āœ‚ļø Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.39k stars 503 forks source link

perf: svg cloning optimized using deep clone #462

Open jagermesh opened 2 months ago

jagermesh commented 2 months ago

Optimize cloning of SVG elements

Description

Instead of cloning each child SVG element (which in my case is around 200) we can use cloneNode(true) to use deep clone mode

Motivation and Context

Converting DIV with SVG inside taking around 20 second in Safari and around 15 in Chrome

Types of changes

Self Check before Merge

vivcat[bot] commented 2 months ago

šŸ‘‹ @jagermesh

šŸ’– Thanks for opening this pull request! šŸ’–

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

Things that will help get your PR across the finish line:

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

jagermesh commented 2 months ago

Sorry, not sure what is wrong with Label step, but fix worth to review. It's significantly improve the speed in case when HTML contain SVG images.

codecov[bot] commented 2 months ago

Codecov Report

Attention: Patch coverage is 20.00000% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 63.10%. Comparing base (b751cbf) to head (b672638). Report is 12 commits behind head on master.

Files Patch % Lines
src/clone-node.ts 20.00% 2 Missing and 2 partials :warning:
Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #462 +/- ## ========================================== + Coverage 62.93% 63.10% +0.17% ========================================== Files 10 10 Lines 580 580 Branches 143 143 ========================================== + Hits 365 366 +1 Misses 151 151 + Partials 64 63 -1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.