-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
Speed up strongRound by avoiding string casting #1716
Conversation
0f6de55
to
8ce899f
Compare
Alright CI is now passing here too. Didn't account for the |
Totally forgot about the |
const pow = 10 ** precision; | ||
return Math.round(num * pow) / pow; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @marvinhagemeister, I was reading your blog post and I noticed this potential issue:
precision
can go up to 19 if I read this file right (but seems to default to 3?) so you can lose some... ah, er... precision when multiplying it with another large number:
Math.round(Number.MAX_SAFE_INTEGER * 10**19) / 10**19 // off by one
Math.round(4294967295 * 10**19) / 10**19 // 4294967295.0000005
Math.round(16777215 * 10**19) / 10**19 // 16777214.999999998
I assume that's okay here because num
won't be that big but I can't say for sure from context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch, yeah with higher precision values this can become an issue. The precision
setting is typically used to reduce precision to make the SVG smaller. So far I've only seen precision settings of 1-3
in the wild.
I'm currently profiling my build pipeline and noticed that the `strongRound` function showed up a couple of times, followed immediately with a bit of GC cleanup shortly after. We can speed up that function by avoiding the string casting caused by `Number.prototype.toFixed()`. In my project's build pipeline with lots of svg icons this saves about 1.4s in total. <img width="792" alt="js-tools-strongRound" src="https://user-images.githubusercontent.com/1062408/204393563-666be3e0-e0ee-4608-9b7d-9ea8352bd36b.png">
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [svgo](https://svgo.dev) ([source](https://github.com/svg/svgo)) | [`3.0.2` -> `3.0.3`](https://renovatebot.com/diffs/npm/svgo/3.0.2/3.0.3) | [![age](https://developer.mend.io/api/mc/badges/age/npm/svgo/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/svgo/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/svgo/3.0.2/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/svgo/3.0.2/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>svg/svgo (svgo)</summary> ### [`v3.0.3`](https://github.com/svg/svgo/releases/tag/v3.0.3) [Compare Source](https://github.com/svg/svgo/compare/v3.0.2...v3.0.3) Includes various bug fixes and optimizations for existing plugins. We're also revamped the documentation for the project. You can find it on [svgo.dev](https://svgo.dev/)! The frontend for svgo.dev is maintained in [svg/svgo.dev](https://github.com/svg/svgo.dev), contributions are welcome. #### What's Changed ##### Settings - **Remove Comments**, introduces `preservePatterns` parameter. Preserves legal comments by default, same as the previous behavior, but can now be overridden. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1812](https://github.com/svg/svgo/pull/1812) - **Remove Description**, set the `removeAny` parameter to `false` by default for accessibility. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1806](https://github.com/svg/svgo/pull/1806) ##### Bug Fixes - **Remove Raster Images**, removes inlined JPEG images. By [@​abejfehr](https://github.com/abejfehr) in [https://github.com/svg/svgo/pull/1742](https://github.com/svg/svgo/pull/1742) - **Cleanup IDs**, correctly handle when 2 IDs have been referenced in a single attribute. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1795](https://github.com/svg/svgo/pull/1795) - **Cleanup IDS**, correctly handle when we've encountered a reference to a node that doesn't exist. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1817](https://github.com/svg/svgo/pull/1817) - **Inline Styles**, treat style prop keys as case-insensitive. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1797](https://github.com/svg/svgo/pull/1797) - **Inline Styles**, remove all classes in multiclass selector. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1801](https://github.com/svg/svgo/pull/1801) - **Inline Styles**, ignore empty CSS blocks instead of adding empty style attribute. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1823](https://github.com/svg/svgo/pull/1823) - **Minify Styles**, removes unused class selectors when the document has no classes. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1800](https://github.com/svg/svgo/pull/1800) - **Prefix IDs**, reuse the same prefix when encountering an ID multiple times. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1814](https://github.com/svg/svgo/pull/1814) - **Remove Hidden Elements**, stops removing non-rendering elements like masks. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1793](https://github.com/svg/svgo/pull/1793) - **Reuse Paths**, creates a new ID if the current one is referenced by another element. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1784](https://github.com/svg/svgo/pull/1784) - **Reuse Paths**, removes redundant `defs` children after optimization. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1785](https://github.com/svg/svgo/pull/1785) - **Reuse Paths**, stops duplicating attributes into the shared definition. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1791](https://github.com/svg/svgo/pull/1791) - Don't crash on a `null`, `undefined`, or empty plugin. Instead, log a warning and ignore it. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/issues/1128](https://github.com/svg/svgo/issues/1128) ##### SVG Optimization - **Convert Transform**, omit spaces between functions. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1802](https://github.com/svg/svgo/pull/1802) - **Remove Scripts**, removes callbacks (`on*`) and `href` attributes with `javascript:` URIs. By [@​cakeinpanic](https://github.com/cakeinpanic) and [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1807](https://github.com/svg/svgo/pull/1807), [https://github.com/svg/svgo/pull/1818](https://github.com/svg/svgo/pull/1818), [https://github.com/svg/svgo/pull/1819](https://github.com/svg/svgo/pull/1819), [https://github.com/svg/svgo/pull/1820](https://github.com/svg/svgo/pull/1820) - **Convert One-Stop Gradients**, new plugin to convert gradients with one stop to a solid color, disabled by default. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1790](https://github.com/svg/svgo/pull/1790) ##### Performance - Various optimizations for path handling. By [@​marvinhagemeister](https://github.com/marvinhagemeister) in [https://github.com/svg/svgo/pull/1716](https://github.com/svg/svgo/pull/1716) and [https://github.com/svg/svgo/pull/1717](https://github.com/svg/svgo/pull/1717) ##### Chores - Revise the README. By [@​ADTC](https://github.com/ADTC) in [https://github.com/svg/svgo/pull/1731](https://github.com/svg/svgo/pull/1731) - Fix dead link to postcss-svgo in README. By [@​Lehoczky](https://github.com/Lehoczky) in [https://github.com/svg/svgo/pull/1770](https://github.com/svg/svgo/pull/1770) - Replace webpack loader library in README as previous was deprecated. By [@​tanyabouman](https://github.com/tanyabouman) in [https://github.com/svg/svgo/pull/1771](https://github.com/svg/svgo/pull/1771) #### Metrics Before and after using vectors from various sources, with the default preset of each respective version: | SVG | Original | v3.0.2 | v3.0.3 | Delta | |---|---|---|---|---| | [Arch Linux Logo](https://archlinux.org/art/) | 8.584 KiB | 4.748 KiB | 4.747 KiB | ⬇️ 0.001 KiB | | [Blobs](https://gitlab.gnome.org/GNOME/gnome-backgrounds/-/blob/main/backgrounds/blobs-d.svg) | 50.45 KiB | 42.949 KiB | 42.949 KiB | | | [Isometric Madness](https://inkscape.org/~Denis_Kuznetsky/%E2%98%85isometric-madness) | 869.034 KiB | 550.829 KiB | 550.699 KiB | ⬇️ 0.13 KiB | | [tldr-pages Banner](https://github.com/tldr-pages/tldr/blob/main/images/banner.svg) | 2.071 KiB | 1.07 KiB | 1.07 KiB | | | [Wikipedia Logo](https://en.wikipedia.org/wiki/File:Wikipedia-logo-v2.svg) | 161.552 KiB | 118.441 KiB | 118.441 KiB | | Before and after of the browser bundle of each respective version: | | v3.0.2 | v3.0.3 | Delta | |---|---|---|---| | svgo.browser.js | 643.5 kB | 651.7 kB | ⬆️ 8.2 kB | </details> --- ### Configuration 📅 **Schedule**: Branch creation - "before 6am on Monday" in timezone Europe/Paris, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/cozy/cozy-stack). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40Ni4wIiwidXBkYXRlZEluVmVyIjoiMzcuNDYuMCIsInRhcmdldEJyYW5jaCI6Im1hc3RlciJ9-->
[![Mend Renovate logo banner](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [svgo](https://svgo.dev) ([source](https://github.com/svg/svgo)) | [`3.0.2` -> `3.0.3`](https://renovatebot.com/diffs/npm/svgo/3.0.2/3.0.3) | [![age](https://developer.mend.io/api/mc/badges/age/npm/svgo/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/svgo/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/svgo/3.0.2/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/svgo/3.0.2/3.0.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>svg/svgo (svgo)</summary> ### [`v3.0.3`](https://github.com/svg/svgo/releases/tag/v3.0.3) [Compare Source](https://github.com/svg/svgo/compare/v3.0.2...v3.0.3) Includes various bug fixes and optimizations for existing plugins. We're also revamped the documentation for the project. You can find it on [svgo.dev](https://svgo.dev/)! The frontend for svgo.dev is maintained in [svg/svgo.dev](https://github.com/svg/svgo.dev), contributions are welcome. #### What's Changed ##### Settings - **Remove Comments**, introduces `preservePatterns` parameter. Preserves legal comments by default, same as the previous behavior, but can now be overridden. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1812](https://github.com/svg/svgo/pull/1812) - **Remove Description**, set the `removeAny` parameter to `false` by default for accessibility. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1806](https://github.com/svg/svgo/pull/1806) ##### Bug Fixes - **Remove Raster Images**, removes inlined JPEG images. By [@​abejfehr](https://github.com/abejfehr) in [https://github.com/svg/svgo/pull/1742](https://github.com/svg/svgo/pull/1742) - **Cleanup IDs**, correctly handle when 2 IDs have been referenced in a single attribute. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1795](https://github.com/svg/svgo/pull/1795) - **Cleanup IDS**, correctly handle when we've encountered a reference to a node that doesn't exist. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1817](https://github.com/svg/svgo/pull/1817) - **Inline Styles**, treat style prop keys as case-insensitive. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1797](https://github.com/svg/svgo/pull/1797) - **Inline Styles**, remove all classes in multiclass selector. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1801](https://github.com/svg/svgo/pull/1801) - **Inline Styles**, ignore empty CSS blocks instead of adding empty style attribute. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1823](https://github.com/svg/svgo/pull/1823) - **Minify Styles**, removes unused class selectors when the document has no classes. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1800](https://github.com/svg/svgo/pull/1800) - **Prefix IDs**, reuse the same prefix when encountering an ID multiple times. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1814](https://github.com/svg/svgo/pull/1814) - **Remove Hidden Elements**, stops removing non-rendering elements like masks. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1793](https://github.com/svg/svgo/pull/1793) - **Reuse Paths**, creates a new ID if the current one is referenced by another element. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1784](https://github.com/svg/svgo/pull/1784) - **Reuse Paths**, removes redundant `defs` children after optimization. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1785](https://github.com/svg/svgo/pull/1785) - **Reuse Paths**, stops duplicating attributes into the shared definition. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1791](https://github.com/svg/svgo/pull/1791) - Don't crash on a `null`, `undefined`, or empty plugin. Instead, log a warning and ignore it. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/issues/1128](https://github.com/svg/svgo/issues/1128) ##### SVG Optimization - **Convert Transform**, omit spaces between functions. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1802](https://github.com/svg/svgo/pull/1802) - **Remove Scripts**, removes callbacks (`on*`) and `href` attributes with `javascript:` URIs. By [@​cakeinpanic](https://github.com/cakeinpanic) and [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1807](https://github.com/svg/svgo/pull/1807), [https://github.com/svg/svgo/pull/1818](https://github.com/svg/svgo/pull/1818), [https://github.com/svg/svgo/pull/1819](https://github.com/svg/svgo/pull/1819), [https://github.com/svg/svgo/pull/1820](https://github.com/svg/svgo/pull/1820) - **Convert One-Stop Gradients**, new plugin to convert gradients with one stop to a solid color, disabled by default. By [@​SethFalco](https://github.com/SethFalco) in [https://github.com/svg/svgo/pull/1790](https://github.com/svg/svgo/pull/1790) ##### Performance - Various optimizations for path handling. By [@​marvinhagemeister](https://github.com/marvinhagemeister) in [https://github.com/svg/svgo/pull/1716](https://github.com/svg/svgo/pull/1716) and [https://github.com/svg/svgo/pull/1717](https://github.com/svg/svgo/pull/1717) ##### Chores - Revise the README. By [@​ADTC](https://github.com/ADTC) in [https://github.com/svg/svgo/pull/1731](https://github.com/svg/svgo/pull/1731) - Fix dead link to postcss-svgo in README. By [@​Lehoczky](https://github.com/Lehoczky) in [https://github.com/svg/svgo/pull/1770](https://github.com/svg/svgo/pull/1770) - Replace webpack loader library in README as previous was deprecated. By [@​tanyabouman](https://github.com/tanyabouman) in [https://github.com/svg/svgo/pull/1771](https://github.com/svg/svgo/pull/1771) #### Metrics Before and after using vectors from various sources, with the default preset of each respective version: | SVG | Original | v3.0.2 | v3.0.3 | Delta | |---|---|---|---|---| | [Arch Linux Logo](https://archlinux.org/art/) | 8.584 KiB | 4.748 KiB | 4.747 KiB | ⬇️ 0.001 KiB | | [Blobs](https://gitlab.gnome.org/GNOME/gnome-backgrounds/-/blob/main/backgrounds/blobs-d.svg) | 50.45 KiB | 42.949 KiB | 42.949 KiB | | | [Isometric Madness](https://inkscape.org/~Denis_Kuznetsky/%E2%98%85isometric-madness) | 869.034 KiB | 550.829 KiB | 550.699 KiB | ⬇️ 0.13 KiB | | [tldr-pages Banner](https://github.com/tldr-pages/tldr/blob/main/images/banner.svg) | 2.071 KiB | 1.07 KiB | 1.07 KiB | | | [Wikipedia Logo](https://en.wikipedia.org/wiki/File:Wikipedia-logo-v2.svg) | 161.552 KiB | 118.441 KiB | 118.441 KiB | | Before and after of the browser bundle of each respective version: | | v3.0.2 | v3.0.3 | Delta | |---|---|---|---| | svgo.browser.js | 643.5 kB | 651.7 kB | ⬆️ 8.2 kB | </details> --- ### Configuration 📅 **Schedule**: Branch creation - "on Monday after 10am before 7pm" in timezone Asia/Seoul, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/channel-io/bezier-react). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40Ni4wIiwidXBkYXRlZEluVmVyIjoiMzcuNDYuMCIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Ed Sungik Choi <sungik.dev@gmail.com>
I'm currently profiling my build pipeline and noticed that the
strongRound
function showed up a couple of times, followed immediately with a bit of GC cleanup shortly after. We can speed up that function by avoiding the string casting caused byNumber.prototype.toFixed()
.In my project's build pipeline with lots of svg icons this saves about 1.4s in total.