Optimizing the Impact of CSS and JavaScript Execution Order on Rendering Performance in Frontend Applications

Optimizing the Impact of CSS and JavaScript Execution Order on Rendering Performance in Frontend Applications

Problem Description
In the frontend rendering process, the loading and execution order of CSS and JavaScript resources directly affects the performance of the Critical Rendering Path. Improper handling can lead to rendering blocking, layout thrashing, or extended white screen time. Interview questions often examine how to optimize the rendering process by controlling resource loading order, asynchronous processing, and dependency management.

Core Principles Explained

  • CSS Blocks Rendering: The browser requires both the DOM and CSSOM to construct the Render Tree. Therefore, external CSS blocks page rendering (but does not block DOM parsing).
  • JavaScript Blocks Parsing: Scripts may modify the DOM or CSSOM, so the browser pauses DOM parsing upon encountering synchronous scripts to execute them first. If a script depends on the CSSOM, it must also wait for previous CSS loading to complete.

Detailed Optimization Steps

  1. Prioritize Loading Critical CSS

    • Inline the core styles required for above-the-fold rendering into the <head> to avoid delays from external CSS file requests.
    • Tool Support: Use tools like Penthouse or Critical to automatically extract critical CSS.
    • Example: 
      <style>
  /* Inline core styles for above-the-fold buttons, headings, etc. */
  .hero { color: blue; }
</style>
<link rel="stylesheet" href="non-critical-styles.css" media="print" onload="this.media='all'">
      (Using media="print" allows non-critical styles to load asynchronously, switching to all media type upon load completion.)

  2. Adjust the Loading Order of CSS and JavaScript

    • Principle: Load CSS first, then execute JavaScript, to avoid scripts blocking while waiting for CSSOM construction.
    • Place <link> tags for CSS before <script> tags to ensure the browser receives CSS resources first.
    • Example: 
      <head>
  <link rel="stylesheet" href="style.css">
  <!-- Place scripts after stylesheets -->
  <script src="script-depending-on-CSSOM.js"></script>
</head>

  3. Asynchronously Load Non-Critical JavaScript

    • Use the async or defer attributes to prevent scripts from blocking parsing:
      • async: The script downloads and executes asynchronously, suitable for independent scripts without dependencies (e.g., analytics code).
      • defer: The script executes in order after DOM parsing is complete, suitable for scripts that depend on the DOM.
    • Example: 
      <script src="analytics.js" async></script>
<script src="app.js" defer></script>

  4. Reduce JavaScript's Dependency Wait on CSSOM

    • If a script does not need to manipulate styles, place it before CSS or use async to avoid blocking.
    • For scripts that need to manipulate styles, delay execution using the DOMContentLoaded event to ensure the CSSOM is ready: 
      document.addEventListener('DOMContentLoaded', () => {
  // Safe to manipulate styles
});

  5. Utilize Modern Resource Loading Priority Control

    • Use preload to load critical CSS in advance, along with an onload event handler: 
      <link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
    • Dynamically load non-critical JavaScript using the load event: 
      window.addEventListener('load', () => {
  const script = document.createElement('script');
  script.src = "lazy.js";
  document.body.appendChild(script);
});

Summary
The core of optimization lies in:

  1. Separating critical and non-critical resources through inlining and asynchronous loading.
  2. Utilizing loading attributes (async/defer) and events to control execution timing.
  3. Following the order principle of "CSS first, scripts later."
    The ultimate goal is to reduce blocking chains in the rendering path, thereby shortening FP (First Paint) and FCP (First Contentful Paint) times.