Prevent image flicker and reloading by checking attribute before setting it

[tcrowe]

What does it do?

Before setting an attribute it checks if the value is different.

Why?

If you look at the network log in the developer console you will notice that if you render SSR, then hydrate, it will reset the src attribute, and then re-download the image.

Usually the image is cached so the time to load it is very fast. However it still flickers when doing this.

---

I think the merits of this approach should be debated but it's useful in my project and the tests still pass.

---

Before submitting the PR, please make sure you do the following

• It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
• This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
• Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to npm run lint!)

I'm not sure how to check for image re-downloads in the tests. Sorry!

Tests

• Run the tests tests with npm test or yarn test)

[codecov-io]

Codecov Report

Merging #3579 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3579   +/-   ##
=======================================
  Coverage   50.25%   50.25%           
=======================================
  Files           1        1           
  Lines         197      197           
=======================================
  Hits           99       99           
  Misses         98       98

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c5ccf6...552f19b. Read the comment docs.

[tcrowe]

1. Loading twice

2. The network log points to setAttribute

[tcrowe]

If you wish to reproduce it I've made this and updated it for this case:
https://github.com/tcrowe/svelte-hydrate-test

[Rich-Harris]

Thank you. Man, that's horrendous — I somehow hadn't encountered that behaviour before. Browsers 🙃

A silver lining here is that if we need to check the current attribute value for correctness anyway, we don't need to bother keeping the current value in memory (which happens for complex attribute values) — in other words we can simplify the generated code a bit. I'll address that in a follow-up