perf: remove <img>'s src when offscreen

[nolanlawson]

This is an additional optimization on top of #445 in order to address #444.

It turns out that browsers seem to do some extra work when a src is set on an <img>, even if that image is offscreen, even if it's marked <img loading=lazy>, and even if it's hidden with content-visibility: auto. To fix that, you can simply use the old data-src trick and set the src only when the <img> is visible.

To detect visibility, we can use the contentvisibilityautostatechange event (kind of like an IntersectionObserver but a bit simpler).

Oddly this event only seems to fire on the element itself and not bubble in Firefox only, but we can just set the event listener on the element itself to fix that.

Improvement in Chrome: 13-19%

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

┌─────────────┬─────────────┬─────────────┬─────────────────────┬───────────────────┬───────────────────┐
│ Benchmark   │ Version     │ Bytes       │            Avg time │    vs this-change │    vs tip-of-tree │
│             │             │             │                     │                   │       tip-of-tree │
├─────────────┼─────────────┼─────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ this-change │ <none>      │ 1029.47 KiB │ 155.77ms - 165.62ms │                   │            faster │
│             │             │             │                     │          -        │         13% - 19% │
│             │             │             │                     │                   │ 24.88ms - 37.22ms │
├─────────────┼─────────────┼─────────────┼─────────────────────┼───────────────────┼───────────────────┤
│ tip-of-tree │ tip-of-tree │ 1027.26 KiB │ 188.03ms - 195.47ms │            slower │                   │
│             │             │             │                     │         15% - 24% │          -        │
│             │             │             │                     │ 24.88ms - 37.22ms │                   │
└─────────────┴─────────────┴─────────────┴─────────────────────┴───────────────────┴───────────────────┘

Improvement in Firefox: 35-37%

┌─────────────┬──────────────────┐
│     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>      │ 1020.95 KiB │ 240.02ms - 245.81ms │                     │              faster │
│             │             │             │                     │            -        │           35% - 37% │
│             │             │             │                     │                     │ 131.03ms - 139.76ms │
├─────────────┼─────────────┼─────────────┼─────────────────────┼─────────────────────┼─────────────────────┤
│ tip-of-tree │ tip-of-tree │ 1071.07 KiB │ 375.04ms - 381.58ms │              slower │                     │
│             │             │             │                     │           53% - 58% │            -        │
│             │             │             │                     │ 131.03ms - 139.76ms │                     │
└─────────────┴─────────────┴─────────────┴─────────────────────┴─────────────────────┴─────────────────────┘

[github-actions]

📊 Tachometer Benchmark Results

Summary

benchmark-total

• emoji-picker-element-change-tab: slower ❌ 1% - 10% (0.40ms - 3.39ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-database-interactions: unsure 🔍 -3% - +5% (-3.90ms - +5.80ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-first-load: unsure 🔍 -4% - +5% (-2.31ms - +2.80ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-many-custom-emoji: faster ✔ 10% - 17% (23.07ms - 39.04ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-search: unsure 🔍 -6% - +2% (-2.97ms - +1.00ms)
  ^{this-change vs tip-of-tree}
• emoji-picker-element-second-load: unsure 🔍 -5% - +2% (-2.12ms - +0.82ms)
  ^{this-change vs tip-of-tree}

Results

emoji-picker-element-change-tab

• Browser: chrome-headless 128.0.0.0
• Sample size: 50
• Built by: Benchmarks #481

• Commit: 093ecdc

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	35.28ms - 37.59ms	-	slower ❌ 1% - 10% 0.40ms - 3.39ms
tip-of-tree tip-of-tree	33.60ms - 35.48ms	faster ✔ 1% - 9% 0.40ms - 3.39ms	-

emoji-picker-element-database-interactions

• Browser: chrome-headless 128.0.0.0
• Sample size: 50
• Built by: Benchmarks #481

• Commit: 093ecdc

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	109.79ms - 117.04ms	-	unsure 🔍 -3% - +5% -3.90ms - +5.80ms
tip-of-tree tip-of-tree	109.24ms - 115.69ms	unsure 🔍 -5% - +3% -5.80ms - +3.90ms	-

emoji-picker-element-first-load

• Browser: chrome-headless 128.0.0.0
• Sample size: 50
• Built by: Benchmarks #481

• Commit: 093ecdc

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	51.95ms - 55.59ms	-	unsure 🔍 -4% - +5% -2.31ms - +2.80ms
tip-of-tree tip-of-tree	51.74ms - 55.32ms	unsure 🔍 -5% - +4% -2.80ms - +2.31ms	-

emoji-picker-element-many-custom-emoji

• Browser: chrome-headless 128.0.0.0
• Sample size: 50
• Built by: Benchmarks #481

• Commit: 093ecdc

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	187.53ms - 202.64ms	-	faster ✔ 10% - 17% 23.07ms - 39.04ms
tip-of-tree tip-of-tree	223.56ms - 228.71ms	slower ❌ 11% - 21% 23.07ms - 39.04ms	-

emoji-picker-element-search

• Browser: chrome-headless 128.0.0.0
• Sample size: 60
• Built by: Benchmarks #481

• Commit: 093ecdc

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	43.66ms - 46.63ms	-	unsure 🔍 -6% - +2% -2.97ms - +1.00ms
tip-of-tree tip-of-tree	44.81ms - 47.44ms	unsure 🔍 -2% - +7% -1.00ms - +2.97ms	-

emoji-picker-element-second-load

• Browser: chrome-headless 128.0.0.0
• Sample size: 50
• Built by: Benchmarks #481

• Commit: 093ecdc

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	42.91ms - 44.96ms	-	unsure 🔍 -5% - +2% -2.12ms - +0.82ms
tip-of-tree tip-of-tree	43.52ms - 45.64ms	unsure 🔍 -2% - +5% -0.82ms - +2.12ms	-

_{tachometer-reporter-action v2 for Benchmarks}

[github-actions]

Size Change: +690 B (+1.88%)

Total Size: 37.5 kB

Filename	Size	Change
./bundle.js	37.5 kB	+690 B (+1.88%)

_{compressed-size-action}

[nolanlawson]

Closing in favor of #450