CSS “消除阻塞呈现的CSS在屏幕视窗之上的内容”

在本文中，我们将介绍如何通过优化CSS来消除阻塞呈现的问题，尤其是在屏幕视窗之上的内容。阻塞呈现的CSS会导致页面加载速度变慢，因此优化CSS可以提高页面加载速度和用户体验。

阅读更多：CSS 教程

什么是阻塞呈现的CSS？

阻塞呈现的CSS是屏幕视窗之上的内容所依赖的CSS，由于CSS阻塞了HTML的呈现，因此页面加载速度变慢。当浏览器遇到CSS资源时，它会停止呈现HTML并开始下载和解析CSS资源，然后再恢复呈现HTML。这种行为会导致页面在加载过程中出现白屏或闪烁的情况。

通常，阻塞呈现的CSS包括页面的关键CSS资源，比如全局样式表和页面上首屏所需的样式。

如何消除阻塞呈现的CSS？

1. 内联关键CSS

内联关键CSS是将关键CSS代码直接插入到HTML文件中的一种方法。这种方式可以避免请求外部CSS资源的等待时间，从而加快了页面的呈现速度。

例如，我们可以在HTML的<head>标签中使用<style>标签来内联关键CSS代码：

<head>
  <style>
    /* 关键CSS代码 */
  </style>
</head>

2. 异步加载CSS文件

使用<link>标签引入CSS文件时，默认情况下浏览器会阻塞呈现直到CSS文件加载完成。但是，我们可以通过使用async属性使CSS文件异步加载，从而不会阻塞呈现。

<link rel="stylesheet" href="styles.css" async>

需要注意的是，异步加载CSS文件可能会导致页面样式短暂的错乱或闪烁，因此在使用异步加载时需要谨慎。

3. 延迟加载CSS文件

另一种消除阻塞呈现的CSS的方法是延迟加载CSS文件。延迟加载意味着将CSS文件加载推迟到了HTML文件加载完成之后，从而不会阻塞呈现。

可以通过将<link>标签中的rel属性设置为preload，并在onload事件中动态添加<link>标签来实现延迟加载。

<script>
  window.onload = function() {
    var cssFile = document.createElement('link');
    cssFile.rel = 'preload';
    cssFile.href = 'styles.css';

    document.head.appendChild(cssFile);
  };
</script>

4. 使用媒体查询

使用媒体查询可以将页面所需的CSS分为多个文件，并根据媒体查询条件决定下载和加载哪些CSS文件。这种方式可以确保仅加载适合当前屏幕视窗大小的CSS文件，减少了不必要的下载和解析时间。

<link rel="stylesheet" href="styles-mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="styles-desktop.css" media="(min-width: 769px)">