0Pricing
Web Performance Optimization & Lighthouse · 课时

阻塞渲染的资源

识别并减轻阻塞渲染的 CSS 和 JavaScript 对页面初始加载时间的影响。

阻塞渲染的资源 是 CoddyKit 上的免费 Web Performance Optimization & Lighthouse 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Performance Optimization & Lighthouse 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

What Blocks Your Page?

When a browser loads a webpage, it needs to process various resources like HTML, CSS, and JavaScript. Sometimes, certain resources must be fully processed before the browser can start showing any content to the user.

These are called render-blocking resources. They prevent the browser from rendering the page until they are dealt with, delaying the 'First Contentful Paint'.

Quick Look: Browser Rendering

To display a page, the browser goes through a series of steps called the Critical Rendering Path. Key steps include:

  • Parsing HTML: Builds the Document Object Model (DOM).
  • Parsing CSS: Builds the CSS Object Model (CSSOM).
  • Combining: Creates the Render Tree (DOM + CSSOM).
  • Layout: Calculates positions and sizes of elements.
  • Paint: Draws pixels on the screen.

Both the DOM and CSSOM are needed before the Render Tree can be built, making CSS a critical part of rendering.

CSS: The Render Blocker

By default, external CSS files are render-blocking. This means the browser will pause rendering until all external stylesheets linked in the <head> of your HTML are downloaded, parsed, and applied.

This is crucial because the browser needs to know how elements should look before it can paint them correctly. If CSS takes a long time to load, your users will see a blank screen for longer.

Example: Default CSS Blocking

Consider this simple HTML. The browser will stop parsing the HTML and wait for style.css to download and be processed before it can render anything.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This content is waiting.</p>
</body>
</html>

Conditional CSS with `media`

You can make some CSS non-render-blocking by using the media attribute in your <link> tag. This tells the browser that a stylesheet only applies under certain conditions (e.g., for print, or specific screen sizes).

If the media condition doesn't match the current viewing environment, the browser will still download the CSS, but it won't block the initial render.

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Inline Essential Styles

Another strategy to mitigate render-blocking CSS is to inline critical styles. These are the minimal CSS rules needed to render the 'above-the-fold' content (what users see first).

By placing these styles directly within a <style> tag in the HTML <head>, the browser doesn't need to make an extra network request, speeding up the initial render. Remaining, non-critical CSS can be loaded asynchronously.

JavaScript Stops Everything

Just like CSS, JavaScript can also be render-blocking. When the browser encounters a traditional <script> tag (without async or defer attributes), it pauses HTML parsing.

It then downloads, parses, and executes the JavaScript file. Only after the script has finished executing will HTML parsing resume. This can significantly delay rendering.

Example: Default JS Blocking

Here, the browser will pause parsing the HTML document when it hits script.js. If script.js is large or slow to load, the <h1> and <p> elements will not be parsed or rendered until the script is done.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Content Below Script</h1>
  <p>This waits for the script.</p>
</body>
</html>

`async` & `defer` for Scripts

HTML offers two attributes for <script> tags to prevent JavaScript from blocking rendering:

  • async: Downloads the script in parallel with HTML parsing. Executes as soon as it's downloaded, potentially before HTML parsing is complete. Good for independent scripts.
  • defer: Downloads the script in parallel with HTML parsing. Executes only after HTML parsing is fully complete, but before the DOMContentLoaded event. Preserves execution order.

Code Example: Non-Blocking JS

By adding async or defer, the browser can continue parsing HTML while the scripts download. This improves perceived performance.

<!DOCTYPE html>
<html>
<head>
  <title>Non-Blocking JS</title>
  <script async src="analytics.js"></script>
  <script defer src="main-app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This renders without waiting for scripts.</p>
</body>
</html>

Spot the Blocker!

Which of the following resources are commonly considered render-blocking by default?

Key Takeaways

Render-blocking resources delay the display of your webpage. Both external CSS and traditional JavaScript can block the browser's rendering process.

  • For CSS: Use the media attribute for conditional loading and consider inlining critical styles.
  • For JavaScript: Leverage async for independent scripts or defer for scripts that depend on the DOM, to allow parallel downloading and non-blocking execution.

Optimizing these resources is a crucial step towards faster web performance!

常见问题解答

「阻塞渲染的资源」课时是免费的吗？

是的 — 「阻塞渲染的资源」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Performance Optimization & Lighthouse 课程的其余内容，请升级到 CoddyKit PRO。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

「阻塞渲染的资源」这节课中我会学到什么？

识别并减轻阻塞渲染的 CSS 和 JavaScript 对页面初始加载时间的影响。 你通过在浏览器中直接运行的动手代码来练习 Web Performance Optimization & Lighthouse，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Performance Optimization & Lighthouse 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web Performance Optimization & Lighthouse 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「阻塞渲染的资源」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web Performance Optimization & Lighthouse 课中编写并运行代码吗？

能。每节 Web Performance Optimization & Lighthouse 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 理解关键路径
  2. 阻塞渲染的资源
  3. 为速度优化内容优先级
  4. 预加载与资源提示
← 返回 Web Performance Optimization & Lighthouse