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.

Sign up for GitHub

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

Jump to bottom

perf: use background-image instead of <img> #450

Merged
merged 11 commits into from
Sep 8, 2024
Merged

perf: use background-image instead of <img> #450

merged 11 commits into from
Sep 8, 2024

Conversation

nolanlawson
Copy link
Owner

@nolanlawson nolanlawson commented Sep 8, 2024 •
edited
Loading

This is a variation on #449 but with a few tweaks:

  • Instead of rendering an <img> at all, we use background-image. This reduces the total number of elements needed to render 20k emojis by half (20k instead of 40k)
  • Use contentvisibilityautostatechange IntersectionObserver to toggle a CSS class which controls whether the background image is shown or not. This simulates what <img loading=lazy> was doing for us but without an <img>.

@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 8, 2024 •
edited
Loading

📊 Tachometer Benchmark Results

Summary

benchmark-total

  • emoji-picker-element-change-tab: unsure 🔍 -9% - +2% (-3.37ms - +0.90ms)
    this-change vs tip-of-tree
  • emoji-picker-element-database-interactions: unsure 🔍 -5% - +7% (-5.95ms - +8.33ms)
    this-change vs tip-of-tree
  • emoji-picker-element-first-load: unsure 🔍 -5% - +5% (-2.59ms - +2.81ms)
    this-change vs tip-of-tree
  • emoji-picker-element-many-custom-emoji: faster ✔ 33% - 39% (74.12ms - 87.34ms)
    this-change vs tip-of-tree
  • emoji-picker-element-search: unsure 🔍 -3% - +4% (-1.23ms - +2.03ms)
    this-change vs tip-of-tree
  • emoji-picker-element-second-load: unsure 🔍 -3% - +6% (-1.19ms - +2.58ms)
    this-change vs tip-of-tree

Results

emoji-picker-element-change-tab
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
33.91ms - 36.77ms-unsure 🔍
-9% - +2%
-3.37ms - +0.90ms
tip-of-tree
tip-of-tree		34.98ms - 38.16msunsure 🔍
-3% - +10%
-0.90ms - +3.37ms		-
emoji-picker-element-database-interactions
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
109.53ms - 119.67ms-unsure 🔍
-5% - +7%
-5.95ms - +8.33ms
tip-of-tree
tip-of-tree		108.38ms - 118.44msunsure 🔍
-7% - +5%
-8.33ms - +5.95ms		-
emoji-picker-element-first-load
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
51.18ms - 55.03ms-unsure 🔍
-5% - +5%
-2.59ms - +2.81ms
tip-of-tree
tip-of-tree		51.10ms - 54.90msunsure 🔍
-5% - +5%
-2.81ms - +2.59ms		-
emoji-picker-element-many-custom-emoji
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
137.55ms - 149.70ms-faster ✔
33% - 39%
74.12ms - 87.34ms
tip-of-tree
tip-of-tree		221.76ms - 226.96msslower ❌
49% - 63%
74.12ms - 87.34ms		-
emoji-picker-element-search
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
46.80ms - 49.28ms-unsure 🔍
-3% - +4%
-1.23ms - +2.03ms
tip-of-tree
tip-of-tree		46.58ms - 48.70msunsure 🔍
-4% - +3%
-2.03ms - +1.23ms		-
emoji-picker-element-second-load
VersionAvg timevs this-change
vs tip-of-tree
tip-of-tree
this-change
43.81ms - 46.39ms-unsure 🔍
-3% - +6%
-1.19ms - +2.58ms
tip-of-tree
tip-of-tree		43.04ms - 45.78msunsure 🔍
-6% - +3%
-2.58ms - +1.19ms		-

tachometer-reporter-action v2 for Benchmarks

@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 8, 2024 •
edited
Loading

Size Change: +590 B (+1.61%)

Total Size: 37.4 kB

Filename Size Change
./bundle.js 37.4 kB +590 B (+1.61%)

compressed-size-action

@nolanlawson nolanlawson mentioned this pull request Sep 8, 2024
Closed
@nolanlawson
Copy link
Owner Author

nolanlawson commented Sep 8, 2024 •
edited
Loading

Chrome improvement: 37-40%

┌─────────────┬─────────────────┐
│     Browser │ chrome-headless │
│             │ 128.0.0.0       │
├─────────────┼─────────────────┤
│ Sample size │ 200             │
└─────────────┴─────────────────┘

┌─────────────┬─────────────┬─────────────┬─────────────────────┬─────────────────────┬─────────────────────┐
│ Benchmark   │ Version     │ Bytes       │            Avg time │      vs this-change │      vs tip-of-tree │
│             │             │             │                     │                     │         tip-of-tree │
├─────────────┼─────────────┼─────────────┼─────────────────────┼─────────────────────┼─────────────────────┤
│ this-change │ <none>      │ 1026.48 KiB │ 175.10ms - 182.27ms │                     │              faster │
│             │             │             │                     │            -        │           37% - 40% │
│             │             │             │                     │                     │ 106.43ms - 119.24ms │
├─────────────┼─────────────┼─────────────┼─────────────────────┼─────────────────────┼─────────────────────┤
│ tip-of-tree │ tip-of-tree │ 1027.26 KiB │ 286.22ms - 296.83ms │              slower │                     │
│             │             │             │                     │           59% - 68% │            -        │
│             │             │             │                     │ 106.43ms - 119.24ms │                     │
└─────────────┴─────────────┴─────────────┴─────────────────────┴─────────────────────┴─────────────────────┘

Firefox improvement: 34-36%


┌─────────────┬──────────────────┐
│     Browser │ firefox-headless │
│             │ 130.0            │
├─────────────┼──────────────────┤
│ Sample size │ 200              │
└─────────────┴──────────────────┘

┌─────────────┬─────────────┬─────────────┬─────────────────────┬─────────────────────┬─────────────────────┐
│ Benchmark   │ Version     │ Bytes       │            Avg time │      vs this-change │      vs tip-of-tree │
│             │             │             │                     │                     │         tip-of-tree │
├─────────────┼─────────────┼─────────────┼─────────────────────┼─────────────────────┼─────────────────────┤
│ this-change │ <none>      │ 1026.48 KiB │ 245.70ms - 250.73ms │                     │              faster │
│             │             │             │                     │            -        │           34% - 36% │
│             │             │             │                     │                     │ 130.54ms - 138.65ms │
├─────────────┼─────────────┼─────────────┼─────────────────────┼─────────────────────┼─────────────────────┤
│ tip-of-tree │ tip-of-tree │ 1071.07 KiB │ 379.64ms - 385.98ms │              slower │                     │
│             │             │             │                     │           52% - 56% │            -        │
│             │             │             │                     │ 130.54ms - 138.65ms │                     │
└─────────────┴─────────────┴─────────────┴─────────────────────┴─────────────────────┴─────────────────────┘

@nolanlawson nolanlawson changed the title perf: use background-image with content-visibility perf: use background-image instead of <img> Sep 8, 2024
@nolanlawson nolanlawson merged commit a9351bc into master Sep 8, 2024
3 checks passed
@nolanlawson nolanlawson mentioned this pull request Sep 9, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@nolanlawson