EN/CH Mode

BRUCE_FE Interview Notes - Page Loading - Prefetch & Preload Analysis

Deep dive into the differences and application scenarios of Prefetch and Preload techniques, master key frontend resource optimization technologies to improve website loading speed and user experience.

EN/CH Mode

Lazy to read articles? Then watch videos!

Basic Concepts

Prefetch and Preload are resource loading optimization techniques provided by modern browsers, helping developers control resource loading priorities to significantly improve page loading speed and user experience.

1. Preload - Pre-load critical resources needed for the current page
2. Prefetch - Pre-fetch future resources that users might need

Although these two techniques have similar names, their purposes and behaviors are completely different. Using them correctly is crucial for optimizing website performance.

Preload vs Prefetch Resource Loading Flow:
┌─────────────────────────────────────────────────────┐
│                                                     │
│  Preload                      Prefetch              │
│  ┌───────────────┐           ┌───────────────┐     │
│  │ Critical      │           │ Future        │     │
│  │ Resources     │           │ Resources     │     │
│  │ (High Priority)│           │ (Low Priority) │     │
│  └───────┬───────┘           └───────┬───────┘     │
│          │                           │             │
│          ▼                           ▼             │
│  ┌───────────────┐           ┌───────────────┐     │
│  │ Load          │           │ Load when      │     │
│  │ Immediately   │           │ Browser Idle   │     │
│  │ for Current   │           │ Store in Cache │     │
│  │ Page Render   │           │ for Future Use │     │
│  └───────────────┘           └───────────────┘     │
│                                                     │
└─────────────────────────────────────────────────────┘

Features:

1. High Priority - Load most important resources first
2. Part of Critical Rendering Path (CRP) - Directly affects current page rendering
3. No Page Parse Blocking - Parallel download, doesn't affect HTML parsing
4. Limited to 4-6 Resources - Too many can cause performance issues

Implementation:

<!-- Preload CSS -->
<link rel="preload" href="critical-styles.css" as="style">

<!-- Preload Font File -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload JavaScript -->
<link rel="preload" href="important-script.js" as="script">

<!-- Preload LCP Main Image -->
<link rel="preload" href="hero-image.jpg" as="image">

Use Cases:

1. Critical CSS and JavaScript - Ensure quick page skeleton rendering
2. Main Images (LCP Elements) - Reduce Largest Contentful Paint time
3. Custom Fonts - Prevent font flashing by preloading
4. Main API Data - Can be used to preload JSON data

Preload - Critical Resources for the Current Page

Preload is used to load resources that are essential for the current page, which will start downloading as soon as the page is parsed, without blocking the parsing process.

特點:

1. High Priority - Load most important resources first
2. Part of Critical Rendering Path (CRP) - Directly affects current page rendering
3. No Page Parse Blocking - Parallel download, doesn't affect HTML parsing
4. Limited to 4-6 Resources - Too many can cause performance issues

實現方式:

<!-- Preload CSS -->
<link rel="preload" href="critical-styles.css" as="style">

<!-- Preload Font File -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload JavaScript -->
<link rel="preload" href="important-script.js" as="script">

<!-- Preload LCP Main Image -->
<link rel="preload" href="hero-image.jpg" as="image">

使用情境:

1. Critical CSS and JavaScript - Ensure quick page skeleton rendering
2. Main Images (LCP Elements) - Reduce Largest Contentful Paint time
3. Custom Fonts - Prevent font flashing by preloading
4. Main API Data - Can be used to preload JSON data

Prefetch - Future Resources That Might Be Needed

Prefetch is used to load resources that might be needed for future pages, which will be downloaded at low priority when the browser is idle and stored in cache for future use.

特點:

1. Low Priority - Only processed when browser is idle
2. Not Part of Current Page Rendering - Only for caching purposes
3. For Future Needs - Prepare for user's next actions
4. Save Subsequent Loading Time - Read prefetched resources from cache

實現方式:

<!-- Prefetch next page resources -->
<link rel="prefetch" href="/next-page.html">

<!-- Prefetch JavaScript module -->
<link rel="prefetch" href="non-critical-bundle.js">

<!-- Prefetch potentially needed images -->
<link rel="prefetch" href="secondary-images.jpg">

使用情境:

1. Page Navigation - Prefetch next/previous page content
2. Search Results - Prefetch top-ranked search result pages
3. Non-critical JS bundle - Prefetch non-immediately needed function modules
4. Login/Register Pages - Prefetch pages user might visit soon

Performance Impact and Application Techniques

Preload and LCP (Largest Contentful Paint)

LCP is a crucial metric in Core Web Vitals, reflecting the time it takes to render the largest content element on the page. Proper use of Preload can significantly improve LCP time.

┌───────────────────────────────────────────────┐
│                                               │
│  Without Preload:                             │
│  Parse HTML ──> Find LCP Image ──> Load Image │
│                                               │
│  With Preload:                                │
│  Parse HTML ──┐                               │
│              ├──> Load LCP Image in Parallel  │
│  Continue    ┘                                │
│  Parsing                                      │
│                                               │
└───────────────────────────────────────────────┘

Summary

Preload and Prefetch are important resource loading optimization techniques in modern web development. Using them correctly can significantly improve website loading speed and user experience.

1. Preload - High-priority loading of critical resources for the current page
2. Prefetch - Low-priority loading of resources that might be needed in the future

Remember:

1. Control the number of preloaded resources, avoid overuse
2. Use Prefetch to prepare for the user's next actions
3. Combine with performance monitoring to ensure these techniques truly improve performance

Through strategic implementation of these techniques, developers can create faster and smoother web browsing experiences, improving user satisfaction and conversion rates.

🔥 Common Interview Questions

(1) What are the main differences between Preload and Prefetch?

Answer: Preload and Prefetch have the following key differences:

Feature	Preload	Prefetch
Purpose	Resources needed for current page	Resources that might be needed for future pages
Priority	High	Low (loads when idle)
Timing	Immediate download	When browser is idle
Use Case	Current page rendering needs	Anticipated user's next action

Code Example:

<!-- Preload example: Font needed for current page -->
<link rel="preload" href="fonts/important-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

<!-- Prefetch example: Resource for next page that user might click -->
<link rel="prefetch" href="/next-page-assets/main.js">

<!-- Both techniques can be used on the same page -->
<head>
  <!-- Critical CSS for current page -->
  <link rel="preload" href="critical.css" as="style">
  <!-- Next page that user might visit -->
  <link rel="prefetch" href="next-page.html">
</head>

(2) When should Preload be used instead of normal resource loading?

Answer: Preload should be used in the following situations:

1. Important resources referenced in CSS but discovered too late (e.g., custom fonts)
2. Critical resources deep in the HTML structure, discovered too late
3. Need to preload LCP images to improve critical performance metrics
4. Resources not directly discovered by HTML parser (e.g., critical resources dynamically loaded by JavaScript)

In summary, consider using Preload when resources are critical for the current page but would be discovered late in the normal loading sequence.

(3) What are the potential problems of using Preload and how to avoid them?

Answer: Main issues include:

1. Overuse - Preloading too many resources diverts bandwidth and slows down critical resource loading
2. Unused Resources - Chrome shows a warning in console if preloaded resources aren't used within 3 seconds
3. Duplicate Requests - If not configured properly, the same resource might be requested twice

Prevention methods:

1. Strictly control the number of Preloads, usually no more than 4-6
2. Ensure each Preload resource has the correct as attribute
3. Only Preload truly critical resources and ensure they will be used immediately
4. Monitor page performance to confirm that Preload actually improves performance

<!-- Example: Preloading a critical font -->
<link rel="preload" href="/fonts/important-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">