React、Vue等JS框架的数据加载机制及性能疑问咨询

Hey there! Since you're new to JS frameworks, it's awesome that you're diving into performance details early on—let's break down your questions clearly:

1. Do React/Vue apps load all data at once? #

Nope, that's not the default behavior for modern JS framework SPAs. Most large apps lean on code splitting and lazy loading to load only what's needed when it's needed.

For example:

• In React, you can use React.lazy() with Suspense to split code by routes or components—so when a user navigates to a specific page, only that page's component code and associated data get fetched.
• In Vue, defineAsyncComponent does the same job, letting you load components on demand instead of bundling everything into one massive file upfront.

You could configure an app to load everything at once, but that's terrible for performance (especially on slow networks) and almost never recommended for large-scale projects.

2. When are images loaded in component-based apps? #

It depends on your setup, but here's the general behavior:

• By default, images start loading when their parent component is rendered—because browsers only request images once they encounter an <img> tag with a valid src attribute. So if a component isn't rendered (like a route the user hasn't navigated to yet), its images won't be loaded.
• You can optimize further with image lazy loading: use the browser's native loading="lazy" attribute, or framework-specific tools (like react-lazyload for React, or Vue's v-lazy directive). This makes images load only when they're about to enter the user's viewport, saving bandwidth for pages with lots of off-screen images.
• If you explicitly preload images (using <link rel="preload">), they'll load when the page first loads—but this is a deliberate choice, not the default.

3. Do large frameworks work like the native SPA example you saw? #

Yep, they follow the same core SPA principle: instead of loading new HTML pages from the server, the app swaps out content in the existing page.

In most cases, when you navigate away from a component:

• If you use caching tools (like Vue's <KeepAlive> component or React's react-keep-alive library), the component is hidden (not unmounted) and retains its state—just like your native SPA example.
• If you don't use caching, the component is unmounted, but its code is already stored in the browser's bundle (unless it was lazy-loaded and you've set it to unload). Next time you navigate back, the component re-renders quickly without reloading code.

This is one of the key perks of SPAs: faster navigation between pages since most heavy lifting happens client-side.

内容的提问来源于stack exchange，提问作者user3473628