动态注入link标签加载CSS：缓存与JS阻塞问题咨询

Great questions about this dynamic CSS loading snippet—let’s dive into each one with clear explanations:

export function loadCSS(path) { 
  const head = document.getElementsByTagName('head')[0]; 
  const style = document.createElement('link'); 
  style.href = path; 
  style.rel = 'stylesheet'; 
  head.appendChild(style); 
}

1. Will the browser load the CSS file from cache? #

Absolutely! Browsers handle caching for dynamically created <link rel="stylesheet"> tags exactly the same way as static ones written directly in your HTML. Whether the file comes from cache depends entirely on two key factors:

• The HTTP cache headers sent by the server (like Cache-Control, Expires, or ETag), which tell the browser how long to store the file locally and when it should check for updates.
• Whether the file’s URL path has changed (e.g., a versioned hash like styles.v3.css—if the path matches a previously cached file and the cache is still valid, the browser uses the local copy instead of making a new request).

As long as your server’s cache rules are set up correctly, the browser will pull the CSS from local cache whenever possible.

2. Does this code block subsequent JavaScript execution until the CSS loads? #

Nope, it won’t block your synchronous JavaScript code from running. Here’s why:
When you dynamically create and append the link element via JS, browsers treat this as an asynchronous resource request. The CSS will download in the background, and while it does block DOM rendering (to prevent unstyled content from flashing on the page), any JS code that runs right after the head.appendChild(style) line will keep executing without waiting for the CSS to finish loading.

For comparison: If this was a static <link> tag in your HTML (not added via JS), then yes—any synchronous JavaScript that comes after it in the HTML would be blocked until the CSS loads. But dynamic injection skips that blocking behavior entirely.

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