HTML+CSS入门关键CSS深度解析-职坐标

HTML+CSS入门关键CSS深度解析

沉沙 2018-06-15 来源：阅读 1677 评论 0

摘要：这意味着如果我们有一个非常大的CSS文件，并且需要一段时间才能完成下载，我们的用户将在浏览器开始呈现页面之前等待整个文件被下载下来。幸运的是，有一个巧妙的技术，使我们能够优化我们的CSS的传输并减轻阻塞。这种技术被称为优化关键渲染路径。关键渲染路径表示浏览器呈现页面的所有必须步骤。我们想要找到最小的阻塞CSS集合，或者关键 CSS，以使页面显示给用户。希望阅读本篇文章以后大家有所收获，帮助大家对HTML+CSS的理解更加深入。

网络速度很慢，但是有一些简单的策略可以使网站变快。其中之一就是将关键的css内联插入到网页的标签, 但是，如果您的网站包含数百页，甚至更糟糕的是包含数百种不同的模板，那么你该怎么做呢？你不能手动做这件事。 Dean Hume解释了一个简单的方法来完成它。如果您是经验丰富的网页开发人员，您可能会发现这篇文章显而易见，并且不言而喻，但对于您的客户和初级开发人员来说，这是一个很好的选择。— Ed.

提供快速，流畅的网络体验是如今构建网站的重要部分。大多数情况下，我们开发网站，而不去理解浏览器实际在做什么。浏览器是如何从我们创建的HTML，CSS和JavaScript渲染我们的网页？我们如何使用这些知识来加速我们网页的渲染？

如果想快速提高网站的性能, Google的 PageSpeed Insights 工具是首选。当尝试检测网页并找到需要改进的区域时，这非常有用。您只需输入要测试的页面的URL，该工具就会提供一系列性能建议。

什么是关键CSS？

对CSS文件的请求可以显著增加网页呈现所需的时间。原因是默认情况下，浏览器将延迟页面呈现，直到它完成加载、解析和执行所有在“页面”中引用的CSS文件。这样做是因为它需要计算页面的布局。

不幸的是，这意味着如果我们有一个非常大的CSS文件，并且需要一段时间才能完成下载，我们的用户将在浏览器开始呈现页面之前等待整个文件被下载下来。幸运的是，有一个巧妙的技术，使我们能够优化我们的CSS的传输并减轻阻塞。这种技术被称为优化关键渲染路径。关键渲染路径表示浏览器呈现页面的所有必须步骤。我们想要找到最小的阻塞CSS集合，或者关键 CSS，以使页面显示给用户。关键资源是可能阻塞页面首屏呈现的所有资源。这背后的想法是，网站应该在前几个TCP数据包响应中为用户获取第一个屏幕的内容（或“首屏”内容）。想要简要了解如何在网页上工作，请查看下面的图片。

HTML+CSS入门关键CSS深度解析

关键 CSS是向用户呈现第一屏的内容所需CSS的最少集合。

在上面的示例中，网页的关键部分只是用户在首次加载页面时可以看到的内容。这意味着我们只需要加载最小量的CSS来渲染页面顶部的内容。对于CSS的其余部分，我们不需要担心，因为我们可以异步加载它。

我们如何确定关键CSS？确定页面的关键CSS是相当复杂的，需要您浏览网页的DOM。接下来，我们需要确定当前应用于视图中每个元素的样式列表。手动执行此操作将是一个繁琐的过程，但是一些很棒的工具可以自动执行这个过程。

在本文中，我将向您展示如何使用关键的CSS提高您的网页呈现速度，并介绍一个可以帮助您自动执行此过程的工具。

关键CSS实践

使用关键CSS，我们需要改变我们处理CSS的方式 – 这意味着将其分成两个文件。对于第一个文件，我们仅提取渲染上述内容所需的最小CSS集，然后将其内联在网页中。对于第二个文件或非关键的CSS，我们异步加载它，以免阻塞网页。

一开始似乎有点奇怪，但是通过将关键的CSS集成到HTML中，我们可以消除关键路径中的额外的请求。这使我们能够在一次请求中提供关键的CSS，以尽快向用户展示页面。

下面的代码给出了一个基本的例子。

JavaScript

&lt;!doctype html&gt;
&lt;head&gt;
  &lt;style&gt; /* 内联CSS */ &lt;/style>
  ``<script> loadCSS('non-critical.css'); </script&gt;``
&lt;/head&gt;
&lt;body&gt;
  ...body goes here
&lt;/body&gt;
&lt;/html&gt;

如上，我们将关键CSS内联在style 标签中。然后,使用 loadCSS(); 异步加载非关键的CSS。这很重要，因为我们在展示首屏后加载繁重的(非关键) CSS。

起初，这似乎是一场噩梦。为什么要手动在每个页面内嵌CSS片段？但是有一个好消息，这个过程可以自动化，在这个例子中，我将运行一个名为Critical 的工具。 Addy Osmani 创造,它是一个允许您自动提取和内联关键路径CSS到HTML中的的Node.js包。

开始

我们先从Node.js控制台开始，并导航到您的网站的路径。通过在您的控制台中输入以下命令来安装Grunt命令行界面：

npm install -g grunt-cli

这将把grunt命令放在你的系统路径中，允许从任何目录运行它。接下来，使用以下命令安装Grunt任务运行程序：

npm install grunt --save-dev

然后安装 grunt-critical 插件.

npm install grunt-critical --save-dev

接下来，您需要创建项目任务配置的Gruntfile。看起来有点像下面的代码。

module.exports = function (grunt) {
grunt.initConfig({
  critical: {
    dist: {
      options: {
        base: './'
      },
      // The source file
      src: 'page.html',
      // The destination file
      dest: 'result.html'
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks('grunt-critical');
  // Default tasks.
  grunt.registerTask('default', ['critical']);
};

在上面的代码中，配置了 Critical 插件来查看我的page.html文件。然后它会根据给定的页面处理CSS来计算关键的CSS。接下来，它将内联关键的CSS并相应地更新HTML页面。

通过在控制台中输入grunt来运行插件。

HTML+CSS入门关键CSS深度解析

使用Grunt自动检测网络性能。

如果您导航到该文件夹，则应该会注意到一个名为result.html的文件，其中包含内联的关键CSS，而剩余的CSS异步加载。您的网页现在就可以使用了！

在幕后, 插件自动使用 PhantomJS, 一个无头WebKit浏览器，捕获所需的关键CSS。这意味着它能够静默地加载您的网页并测试最佳关键CSS。这个功能还保证了插件在不同屏幕尺寸上的灵活性。例如，您可以提供不同的屏幕尺寸，插件将相应地捕获并内联您的关键CSS 。

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: ['index.html'], dest: 'dist/index.html'}
    ]
  }
}

上面的代码将从多个维度处理给定的文件，并内联相应的关键CSS。这意味着您可以根据多个屏幕宽度运行您的网站，并确保您的用户仍然拥有相同的体验。我们知道，使用3G和4G的移动连接可能是不稳定的 – 这就是为什么这种技术对于移动用户来说如此重要。

在生产环境中使用Critical

使用Critical这样的工具是自动提取和内联关键CSS的好方法，而无需改变开发网站的方式，但是如何适应真实场景？要将新更新的文件置于目标文件，您只需按照通常的方式进行部署 – 无需在生产环境中更改。您只需记住，每次构建或更改CSS文件时，都需要运行Grunt。

我们在本文中运行的代码示例涵盖了单个文件的使用，但是当您需要处理多个文件关键CSS甚至整个文件夹时会发生什么？您的Gruntfile可以更新以处理多个文件，类似于下面的示例。

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
       },
       {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: ['index.html'], dest: 'dist/index.html'},
      {src: ['blog.html'], dest: 'dist/blog.html'}
      {src: ['about.html'], dest: 'dist/about.html'}
      {src: ['contact.html'], dest: 'dist/contact.html'}
    ]
  }
}

您还可以使用以下代码对给定文件夹中的每个HTML文件执行任务：

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }],
      src: '*.html',
      dest:  'dist/'
    }
  }
}

上面的代码示例可以让您深入了解如何在您的网站上实现。

测试

一如以往，测试任何新的变化是非常重要的。如果您想要测试更改，有一些很棒的工具可以在线免费使用。进到 Google’s PageSpeed Insights 并通过该工具运行您的URL。您应该注意到，您的网页现在不再具有任何阻塞资源，并且您的性能改进建议已经变绿。而你可能也熟悉了另一个伟大的工具。WebPagetest

HTML+CSS入门关键CSS深度解析

使用WebPagetest是测试您的网页及时呈现的好方法。

它是一个免费的工具，可以让您从全球各个地点进行网站速度测试。除了对您的网页的内容进行丰富的分析性审查，如果您选择“Visual Comparison”, 该工具将比较两个网页。这是比较更新您的关键CSS之前和之后的结果并回放差异的好方法。

使用关键CSS的想法是，我们的网页会尽快呈现，从而尽快向用户展示内容。测量这个的最好方法是使用 speed index. WebPagetest采用的测量方法是衡量页面内容的视觉填充速度。SpeedIndex测量可视页面加载的视觉进度，并计算内容绘制速度的总体得分。比较 SpeedIndex测量通过内联关键CSS之前和之后的改变。您将对您的渲染时间的改变大吃一惊。

深入了解

正如大多数优化工具，对你的网站总有利弊。弊端之一是丢失浏览器中的CSS缓存。如果动态网页更改频繁,我们不希望缓存HTML页面这意味着内联CSS 每次重新下载。需要说明的是只列出关键的CSS，异步加载剩下的非关键的CSS。我们可以缓存非关键的CSS。有很多争论和反对关于在中内联CSS, 了解更多我推荐 Hans Christian Reinl的博客 “A counter statement: Putting the CSS in the head”。

如果您使用（CDN），也值得一提的是，您还应该从CDN中提供非关键的CSS。这样做允许您直接从边缘提供缓存的资源，提供更快的响应时间，而不是一路路由到源服务器来获取它们。

对于传统的网页，内联CSS的技术运作良好，但根据您的情况，可能并不总是适用。如果您有客户端JavaScript生成HTML怎么办？如果您在单页面应用程序上怎么办？如果您尽可能多地输出关键的CSS，它将提升页面渲染效果。了解关键CSS的工作原理及是否适用于您的网页，这一点很重要。我喜欢Guy Podjarny对此的立场：

“尽管有这些限制，Inline在前端优化领域仍然是一个很重要的工具。因此，你应该使用它，但要小心，不要滥用它。“

—Guy Podjarny

在 “为什么内联一切不是答案”,他提供了关于什么时候应该_什么时候不应该嵌入CSS的好建议。

这不完美

虽然生成和内联关键CSS所需的许多工具都在不断改进，但可能还有一些需要改进的领域。如果您发现任何错误，您的项目，open up an issue 或提出请求，并在GitHub贡献项目。

为您的网站优化关键渲染路径可以大大改善页面加载时间。使用这种技术使我们能够使用响应式布局，而不会影响其众所周知的优点。这也是确保您的页面加载快速而不妨碍您的设计的好方法。

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML/CSS频道！

web前端规范 css基础教程 html/css入门书籍

本文由 @沉沙发布于职坐标。未经许可，禁止转载。