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(icon): avoid unnecessarily parsing icon sets #18654

Merged
merged 1 commit into from Aug 13, 2020

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 29, 2020

Some internal refactoring to improve the performance of the icon registry by avoiding unnecessary work:

  • When an icon set is registered as a string literal, we parse it immediately into an SVG element. This is inefficient since the set may not be required immediately. These changes make it so that we store the SVG text and we only parse it when it's required.
  • When an icon is requested, we try to find it in all any of the icon sets which requires us to parse them since we don't know which one is supposed to have it. These changes add an inexpensive indexOf check before parsing so that we can quickly rule out the sets that absolutely can't have the icon. The check won't exclude 100% of the unnecessary parsing, but it should help with the majority. Once this is in we could make it slightly smarter by doing something like svgText.indexOf('id="${iconName}"'), but that's a bit more risky.

Fixes #18644.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Feb 29, 2020
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 29, 2020
@crisbeto crisbeto force-pushed the 18644/icon-parse-optimization branch from 556d09a to 32f07f1 Compare February 29, 2020 10:34
}

/** Icon configuration whose content has already been loaded. */
type LoadedSvgIconConfig = SvgIconConfig & {svgText: string};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's cool to see how techniques like this develop and apply to code written when we were all first starting to use TypeScript.

src/material/icon/icon-registry.ts Outdated Show resolved Hide resolved
@crisbeto crisbeto force-pushed the 18644/icon-parse-optimization branch from 32f07f1 to 143dd01 Compare March 2, 2020 21:45
@crisbeto
Copy link
Member Author

crisbeto commented Mar 2, 2020

I've addressed the feedback @jelbourn.

@mleibman
Copy link
Contributor

mleibman commented Mar 2, 2020

@crisbeto Thanks for the quick fix!

Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added perf This issue is related to performance pr: lgtm action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Mar 3, 2020
Some internal refactoring to improve the performance of the icon registry by avoiding unnecessary work:
* When an icon set is registered as a string literal, we parse it immediately into an SVG element. This is inefficient since the set may not be required immediately. These changes make it so that we store the SVG text and we only parse it when it's required.
* When an icon is requested, we try to find it in all any of the icon sets which requires us to parse them since we don't know which one is supposed to have it. These changes add an inexpensive `indexOf` check before parsing so that we can quickly rule out the sets that absolutely can't have the icon. The check won't exclude 100% of the unnecessary parsing, but it should help with the majority. Once this is in we could make it slightly smarter by doing something like `svgText.indexOf(`id="${iconName}"`)`, but that's a bit more risky.

Fixes angular#18644.
@mmalerba mmalerba force-pushed the 18644/icon-parse-optimization branch from 143dd01 to f4bfa84 Compare April 9, 2020 20:47
@jelbourn jelbourn added this to PRs in P2 PRs Jul 9, 2020
@mmalerba mmalerba removed the lgtm label Jul 31, 2020
@andrewseguin andrewseguin merged commit 5526ab9 into angular:master Aug 13, 2020
P2 PRs automation moved this from PRs to Done Aug 13, 2020
andrewseguin pushed a commit that referenced this pull request Aug 13, 2020
Some internal refactoring to improve the performance of the icon registry by avoiding unnecessary work:
* When an icon set is registered as a string literal, we parse it immediately into an SVG element. This is inefficient since the set may not be required immediately. These changes make it so that we store the SVG text and we only parse it when it's required.
* When an icon is requested, we try to find it in all any of the icon sets which requires us to parse them since we don't know which one is supposed to have it. These changes add an inexpensive `indexOf` check before parsing so that we can quickly rule out the sets that absolutely can't have the icon. The check won't exclude 100% of the unnecessary parsing, but it should help with the majority. Once this is in we could make it slightly smarter by doing something like `svgText.indexOf(`id="${iconName}"`)`, but that's a bit more risky.

Fixes #18644.

(cherry picked from commit 5526ab9)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P2 The issue is important to a large percentage of users, with a workaround perf This issue is related to performance target: patch This PR is targeted for the next patch release
Projects
P2 PRs
  
Done
Development

Successfully merging this pull request may close these issues.

perf(matIconRegistry): parse SVG iconsets on demand
6 participants