MA7: Performance on low-cost phones: lists, start-up, size and battery
Starting quickly
🎯You'll be able to
Explain what happens at cold start, and make an app show something useful quickly.
🏠The everyday picture
A tea stall that keeps water hot can serve a cup in a minute. One that starts by fetching water and lighting the stove keeps the first customer waiting.
📘What it really is
-
Cold start: the app's process starts, the JavaScript bundle loads, and the first screen draws. Warm starts reuse a process that's still in memory.
-
Bundle loading: React Native's Hermes engine loads precompiled bytecode, which starts faster than plain JavaScript. A smaller bundle loads faster.
-
Work at import: code that runs when a file is imported (parsing big JSON, building large tables) delays the first screen.
- Show saved data first: draw the list from the phone's store, then sync in the background.
- Load later what isn't needed now: screens and data used rarely can load when first opened.
📝A worked example
Input: KhetNote's starter imports data/demo-photos.json (about 2.6 MB of pictures stored as text) in App.js.
Steps:
- Every start loads and parses this file before showing anything, and it's built into the bundle.
- Remove the import; if pictures are needed, ship them as image files or download them when used.
- Start from the store: show saved visits, then sync.
Expected output: a smaller bundle and a first screen that appears sooner.
🌍Where it's used
- Large apps track start-up time in every release.
- Android vitals flag slow cold starts.
- Teams set budgets, such as "first screen within 2 seconds on our test phone".
📝Case scenario
A travel app parsed a 5 MB list of airports at start-up. On older phones, the splash screen stayed for six seconds. Moving the list into a database queried when needed cut start-up to under two seconds (team's own measurement).
🖱️Try it
Open the starter's App.js and list everything that runs before the first screen draws. Success: you find the demo photos import.
⚠️Common mistakes
- Big data in the bundle. Sign: a large bundle and slow start. Fix: files, a database or download when needed.
- Waiting for the network to show anything. Sign: a spinner on every start. Fix: show saved data first.
- Heavy work at import. Sign: slow start without obvious cause. Fix: move work to when it's needed.
🛠️For your project
Project 3's test 6 builds the bundle and checks it's under 2 MB; the starter's is over 4 MB.
✅Quick check
What does Hermes do to help start-up?
Show the answer
It runs precompiled bytecode, which loads faster than plain JavaScript.
What should the first screen show while syncing?
Show the answer
The data already saved on the phone.