Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: svg cloning optimized using deep clone #462

Merged
merged 1 commit into from
Feb 12, 2025

Conversation

jagermesh
Copy link
Contributor

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

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • [x ] Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

Self Check before Merge

  • [x ] My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@biiibooo
Copy link
Contributor

biiibooo bot commented Apr 17, 2024

👋 @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:

  • fix: don't overwrite prevent_default if default wasn't prevented
  • feat: add graph.scale() method
  • docs: graph.getShortestPath is now available

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

  • Follow the TypeScript coding style.
  • Run npm run lint locally to catch formatting errors earlier.
  • Document any user-facing changes you've made.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

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
Copy link
Contributor Author

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.

Copy link

codecov bot commented Apr 17, 2024

Codecov Report

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

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

Files with missing lines Patch % Lines
src/clone-node.ts 20.00% 2 Missing and 2 partials ⚠️
Additional details and impacted files
@@            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     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@bubkoo bubkoo merged commit 9aac2fd into bubkoo:master Feb 12, 2025
10 of 12 checks passed
@biiibooo biiibooo bot removed the PR: unreviewed label Feb 12, 2025
@biiibooo
Copy link
Contributor

biiibooo bot commented Feb 12, 2025

👋 @jagermesh Congrats on merging your first pull request! 🎉🎉🎉

@biiibooo biiibooo bot added the PR: merged label Feb 12, 2025
biiibooo bot added a commit that referenced this pull request Feb 12, 2025
## [1.11.12](v1.11.11...v1.11.12) (2025-02-12)

### Bug Fixes

* add possibility to use own handling of onerror which will not en… ([#453](#453)) ([04160c3](04160c3))
* ensure images are totally prcoessed before using them (ios) ([#478](#478)) ([51fb98f](51fb98f))
* Fix `fontEmbedCSS ` incorrect sizing ([#422](#422)) ([7020162](7020162))

### Performance Improvements

* embed only used fonts ([#476](#476)) ([09bee44](09bee44))
* svg cloning optimized using deep clone ([#462](#462)) ([9aac2fd](9aac2fd))
@biiibooo
Copy link
Contributor

biiibooo bot commented Feb 12, 2025

🎉 This PR is included in version 1.11.12 🎉

The release is available on:

Your semantic-release bot 📦🚀

@biiibooo biiibooo bot added the released label Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants