Recharge

What do I do with my spare time

Outline

Something has existed for a long time but we ignore

1 BFCache

SPA, MPA, and more than these

2 Rendering on web

Competing Against Luck

The Power of moments

The Model Thinker

3 Books I read

BFCache

Back Forward Cache

Optimize for the instant back and forward navigation

Aim to improve UX

BFCache

Browser Support

Supported in Firefox/Safari for many years

Chrome start to support in version 96 (2021 Q4)

BFCache

Browser Support

https://www.youtube.com/watch?v=cuPsdRckkF0

BFCache

Compare to HTTP Cache

HTTP Cache cache the resources

BFCache caches an entire snapshot

BFCache

How BFCache cache

JavaScript Stack & Heap

No need to re-parse DOM/CSSOM

No need to re-evaluate JS

BFCache

Observe BFCache

Browser Pageshow event

event.persisted

Chrome dev tool

BFCache

Observe BFCache

https://web.dev/bfcache/

BFCache

Observe BFCache

https://web.dev/bfcache/

BFCache

Pageview tracking issue

https://web.dev/bfcache/

BFCache

Never use the unload event

BFCache may disabled due to it

BFCache

Use beforeunload conditinoally

Rendering On web

Rendering on web

https://web.dev/rendering-on-the-web/

Server Rendering

https://web.dev/rendering-on-the-web/

Server Rendering

https://web.dev/rendering-on-the-web/