To get a sense of how deeply a candidate understands frontend performance, one question I often ask is: "What has a higher impact on performance, a 350kB image or 350kB of JavaScript?"
For those that are familiar with how a browser operates, the answer should be fairly obvious. And if you are developing for a browser, you should understand the platform you're targeting. This question has caught many by surprise, as it's not a common question given in interview prep guides, and the answers have often been incorrect. It serves as a fantastic litmus test for separating surface-level knowledge from deep, first-principles understanding.
For those that are curious, the JavaScript is much, much more impactful. Here’s why.
What the Browser Does with an Image
When a browser encounters a 350kB image, the process is relatively straightforward. It downloads the file, and then the GPU is largely responsible for decoding it and painting it to the screen. While it consumes memory and takes time to download, the process is heavily optimized and often happens without significantly blocking the browser's main thread. The page can still feel responsive to the user while the image is being processed.
What the Browser Does with JavaScript
A 350kB JavaScript file is a different beast entirely. The browser must:
- Download the file.
- Parse the script to understand its structure and syntax.
- Compile it into bytecode.
- Execute the code.
Crucially, this entire process is "main-thread blocking." The main thread is what handles user input, rendering updates, and other critical tasks. While your 350kB of JavaScript is being parsed, compiled, and executed, the user's browser can become completely unresponsive. Clicks don't register, scrolling stutters, and the page feels frozen. Furthermore, 350kB of minified JavaScript equates to a large amount of scripting, which can trigger further resource requests, manipulate the DOM extensively, and cause significant layout shifts.
Why This Matters More Than Ever
This level of understanding is required now more than ever in the age of generated code. AI and modern frameworks are brilliant at abstracting away complexity and producing functional code. You can ask an AI to build a component, and it will give you something that works.
But it won't necessarily give you something that is performant.
The AI doesn't inherently understand the cost of its own output on the browser's main thread. It might generate a massive chunk of JavaScript to perform a simple task that a more experienced engineer would solve with a few lines of code or even CSS.
Beyond whether something is functional, you must know the impact it has on the user experience. True engineering is about the responsible use of resources to enhance performance and minimize frustration. It's about understanding the platform you're building for, not just telling it what to do.