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

Improve search performance #1170

Merged
merged 3 commits into from Feb 3, 2019

Conversation

3 participants
@ericcornelissen
Copy link
Member

ericcornelissen commented Jan 16, 2019

Issue: #1089

Description

Improve performance of search on website

By reducing the number of times a search query loops over all icons or
all icons that match the search query (from 3 to 1 and 2 to 0
respectively) the search on simpleicons.org should now be noticeably
faster (if it was slow before). Especially in conjunction with #1169.

This was achieved by utilizing CSS (which operates faster then plain
JavaScript) to do most of the heavy lifting. A class on <body> now
dictates the order of the icons rather then a JavaScript for-loop (found
in the removed function orderIcons).

It was also achieved by more cleverly utilizing the fuzzy search logic
and recognizing that the CSS order property also works if numbers are
not consecutive. Less relevant icons will have a higher value assigned
by fuzzy search, which is what the order-value of the icon will
become, removing the need for sorting and an additional loop.

Some resources that helped me:


PS. there are a few minor unrelated changes (specifically this, but more), my apologies

ericcornelissen added some commits Jan 16, 2019

Improve performance of search on website
By reducing the number of times a search query loops over all icons or
all icons that match the search query (from 3 to 1 and 2 to 0
respectively) the search on simpleicons.org should now be noticeably
faster (if it was slow before). Especially in conjunction with #1169.

This was achieved by utilizing CSS (which operates faster then plain
JavaScript) to do most of the heavy lifting. A class on <body> now
dictates the order of the icons rather then a JavaScript for-loop (found
in the removed function `orderIcons`).

It was also achieved by more cleverly utilizing the fuzzy search logic
and recognizing that the CSS `order` property also works if number are
not consecutive. Less relevant numbers will have a higher value assigned
by fuzzy search, which is what the `order`-value of the icon will
become, removing the need for sorting and an additional loop.

Some resources that helped me:
- https://css-tricks.com/css-attr-function-got-nothin-custom-properties/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
    Specifically the "Values in JavaScript" section

* * *

One unrelated change in stylesheet.css where 2 separate rulesets for
.grid-item__link have been merged.

@ericcornelissen ericcornelissen changed the title Increase search performance Improve search performance Jan 16, 2019

@birjolaxew

This comment has been minimized.

Copy link
Member

birjolaxew commented Feb 3, 2019

👍 Interesting use of CSS variables!

@birjolaxew birjolaxew merged commit db442fb into simple-icons:develop Feb 3, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@ericcornelissen ericcornelissen deleted the ericcornelissen:site/search-performance branch Feb 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.