"消除阻塞渲染的CSS和JavaScript"。 这一条Google Page Speed Insights的建议总让我困惑。
当一个网页被访问时，Google希望它仅加载对初始视图有用的内容，并使用空闲时间来加载其他内容。这种方式可以使用户尽可能早地看到页面。
我们可以做很多事情来减少阻塞渲染的JavaScript，例如code splitting、tree shaking，缓存等。
但是如何减少阻塞渲染的CSS？为此，可以拆分并优先加载首次渲染所需要的CSS（关键CSS)，然后再加载其它CSS。
可以通过编程的方式筛选出关键CSS，在本文中，我将向你展示如何通过Webpack的自动化流程来实现该方案。
什么是阻塞渲染
如果资源是“阻塞渲染”的，则表示浏览器在资源下载或处理完成之前不会显示该页面。
通常，我们在 html 的 head 标签中添加 CSS 样式表，这种方式会阻塞渲染，如下所示：
<head>

  <link rel="stylesheet" href="/style.css">

  ...

</head>

<body>

  <p>在style.css下载完之前，你看不到我！！！</p>

</body>

　　

当这个 html 页面被网络浏览器加载时，它将从上到下被逐行解析。当浏览器解析到 link 标签时，它将立即开始下载 CSS 样式表，在完成之前不会渲染页面。
对于一个大型网站，尤其是像使用了 Bootstrap 这种庞大框架的网站，样式表有几百 KB，用户必须耐心等待其完全下载完才能看到页面。
那么，我们是否应该把link标签放到 body 中，以防止阻塞渲染？你可以这么做，但是阻塞渲染也不是全无优点，我们实际上可以利用它。如果页面渲染时没有加载任何 CSS，我们会遇到丑陋的"内容闪现"。
我们想要的完美解决方案就应该是：首屏相关的关键 CSS 使用阻塞渲染的方式加载，所有的非关键 CSS 在首屏渲染完成后加载。
关键CSS
这里是我用 Webpack 和 Bootstrap 编写的一个简单的网页, 下面的截图是首次渲染后的样式。
点击 Sign Up today 按钮会弹出一个模态框, 模态框弹出时的样式如下:
首次渲染需要的样式包括导航条的样式、超大屏幕样式、按钮样式、其它布局和字体的公用样式。但是我们并不需要模态框的样式，因为它不会立即在页面中显示。考虑到这些，下面是我们拆分关键 CSS 和非关键 CSS 的可能的方式：
critical.css
.nav {

  ...

}

.jumbtron {

  ...

}

.btn {

  ...

}

　　

non_critical.css
.modal {

  ...

}

如果你已经有这个概念，那么你可能会提出两个疑问：

  1. 我们如何用程序区分关键CSS和非关键CSS?
  2. 如何让页面在首次渲染之前加载关键CSS，之后加载非关键CSS？
示例项目
我将简要介绍一下这个项目的基本配置，这样我们在遇到解决方案时，方便快速消化。
首先, 在入口文件中引入Bootsrap SASS。
main.js
require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

　　

我使用 sass-loader 来处理 sass，与 Extract Text Plugin 一起使用，将编译出来的 css 放到单独的文件中。
使用 HTML Webpack Plugin 来创建一个 HTML 文件，它引入编译后的 CSS。这在我们的解决方案中是必需的，你马上就会看到。
webpack.config.js
module.exports = {

  module: {

    rules: [

      {

        test: /\.scss$/,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: ['css-loader', 'sass-loader']

        })

      },

      ...

    ]

  },

  ...

  plugins: [

    new ExtractTextPlugin({ filename: 'style.css' }),

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: 'index.html',

      inject: true

    })

  ]

};

　　

运行构建之后，这里是HTML文件的样子。请注意，CSS文件在head标签里引入，因此将会阻塞渲染。
index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>vuestrap-code-split</title>

    <link href="/style.css" rel="stylesheet">

</head>

<body>

  <!--App content goes here, omitted for brevity.-->

  <script type="text/javascript" src="/build_main.js"></script>

</body>

</html>

　　

编程识别关键 CSS
手动区分关键 CSS 维护起来会非常痛苦。以编程方式来实现的话，我们可以使用 Addy Osmani 的 Critical。这是一个 Node.js 模块，它将读入 HTML 文档，并识别关键 CSS。Critical 能做的还不止这些，你很快就能体会到。
Critical 识别关键 CSS 的方式如下：指定屏幕尺寸并使用 PhantomJS 加载页面，提取在渲染页面中用到的所有 CSS 规则。
以下为对项目的设置:
const critical = require("critical");

critical.generate({

  /* Webpack打包输出的路径 */

  base: path.join(path.resolve(__dirname), 'dist/'),

  src: 'index.html',

  dest: 'index.html',

  inline: true,

  extract: true,

  /* iPhone6的尺寸，你可以按需要修改 */

  width: 375,

  height: 565,

  /* 确保调用打包后的JS文件 */

  penthouse: {

    blockJSRequests: false,

  }

});

　　

执行时，会将Webpack打包输出文件中HTML更新为:
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>Bootstrap Critical</title>

  <style type="text/css">

    /* 关键CSS通过内部样式表方式引入 */

    body {

      font-family: Helvetica Neue,Helvetica,Arial,sans-serif;

      font-size: 14px;

      line-height: 1.42857;

      color: #333;

      background-color: #fff;

    }

    ...

  </style>

  <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">

  <noscript>

      <link href="/style.96106fab.css" rel="stylesheet">

  </noscript>

  <script>

    /*用来加载非关键CSS的脚本*/

  </script>

</head>

<body>

  <!-- 这里是App的内容 -->

  <script type="text/javascript" src="/build_main.js"></script>

</body>

</html>

　　

它还将输出一个新的 CSS 文件，例如 style.96106fab.css （文件自动 Hash 命名）。这个 CSS 文件与原始样式表相同，只是不包含关键 CSS。
内联嵌入关键CSS样式
你会注意到，关键CSS已经嵌入到文档的头部。这是最佳的，因为页面不必从服务器加载它。
预加载非关键CSS
你还会注意到，非关键 CSS 使用了一个看起来更复杂的 link 标签来加载。rel="preload" 通知浏览器开始获取非关键 CSS 以供之后用。其关键在于，preload 不阻塞渲染，无论资源是否加载完成，浏览器都会接着绘制页面。
link 标签中的 onload 属性允许我们在非关键 CSS 加载完成时运行脚本。Critical 模块可以自动将此脚本嵌入到文档中，这种方式提供了将非关键 CSS 加载到页面中的跨浏览器兼容方法。
<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel='stylesheet'">

　　

把 Critical 组件添加到 webpack 打包流程中
我创建了一个名为 HTML Critical Webpack Plugin 的插件，该插件仅仅是 Critical 模块的封装。它将在 HTML Webpack Plugin 输出文件后运行。
你可以在 Webpack 的项目中这样引入：
const HtmlCriticalPlugin = require("html-critical-webpack-plugin");

module.export = {

  ...

  plugins: [

    new HtmlWebpackPlugin({ ... }),

    new ExtractTextPlugin({ ... }),

    new HtmlCriticalPlugin({

      base: path.join(path.resolve(__dirname), 'dist/'),

      src: 'index.html',

      dest: 'index.html',

      inline: true,

      minify: true,

      extract: true,

      width: 375,

      height: 565,

      penthouse: {

        blockJSRequests: false,

      }

    })

  ]

};

注意：你应该只在生产版本中使用，因为它将使你的开发环境的构建很慢

表现结果
现在已经抽离了关键 CSS，并且把非关键 CSS 的加载放到空闲时间，这在性能方面会有怎样的提升呢?
我使用 Chrome 的 Lighthouse 扩展插件进行测试。请记住，我们尝试优化的指标是“首次有效绘制”，也就是用户需要多久才能看到真正可浏览的页面。
不使用区分关键CSS技术的表现
使用区分关键CSS技术的表现
正如你所看到的，我的应用程序 First Meaningful paint 时间缩短了将近 1 秒，到达可交互状态的时间节省了 0.5 秒。实际中，你的应用程序可能无法获得如此惊人的改善，因为我的 CSS 很笨重（我包含了整个 Bootstrap 库），而且在这样一个简单的应用程序中，我没有很多关键CSS规则。
 

关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案的更多相关文章

  1. 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

  2. webpack - 优化阻塞渲染的css

    随着浏览器的日新月异,网页的性能和速度越来越好,并且对于用户体验来说也越来越重要. 现在有很多优化页面的办法,比如:静态资源的合并和压缩,code splitting,DNS预读取等等. 本文介绍的是 ...

  3. CSS阻塞渲染、怎么防止css阻塞

    浏览器渲染流程: 1.浏览器开始解析目标HTML文件,执行流的顺序为自上而下. 2.HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoad ...

  4. CSS加载会阻塞页面显示？

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下. 原理解析 那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下. ...

  5. webpack 3.X学习之CSS处理

    Loaders Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因.通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理. Lo ...

  6. webpack快速入门——CSS进阶：消除未使用的CSS

    使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...

  7. webpack 打包成功，但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  8. webpack入门之打包html,css,js,img(一)

    webpack到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习webpack的成果, webpack就是打包文件用的,html,css,js,img,为什 ...

  9. [css] 【转载】 精简高效的CSS命名准则/方法

    原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...

随机推荐

  1. 从零开始,Windows操作系统下的超详细的阿里云发布项目过程

    ==================== 步骤0: 购买阿里云服务器 ==================== 0.1 从来没有搞过外网部署的我,当然是先买服务器了,感谢很多小伙伴的帮忙 0.2 登录 ...

  2. SpringMVC的简介和工作流程

    一.简介 Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.Spri ...

  3. 详解Apache Hudi如何配置各种类型分区

    1. 引入 Apache Hudi支持多种分区方式数据集,如多级分区.单分区.时间日期分区.无分区数据集等,用户可根据实际需求选择合适的分区方式,下面来详细了解Hudi如何配置何种类型分区. 2. 分 ...

  4. ES6中的变量的解构赋值， 解放我们的双手，实现变量的批量赋值

    ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...

  5. .NET Core + K8S + Apollo 玩转配置中心

    1.引言 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理 ...

  6. 【小白学AI】随机森林 全解 （从bagging到variance）

    文章转自公众号[机器学习炼丹术],关注回复"炼丹"即可获得海量免费学习资料哦! 目录 1 随机森林 2 bagging 3 神秘的63.2% 4 随机森林 vs bagging 5 ...

  7. Java数据结构——2-3树

    定义2-3树是平衡的3路查找树,其中2(2-node)是指拥有两个分支的节点,3(3-node)是指拥有三个分支的节点.B-树是一种平衡的多路查找树,2-3树属于b-树,其也同样具有B-树的性质,如m ...

  8. 在使用postman中操作api接口测试403解决方法

    在向Jenkins发送请求时收到了这样的403错误信息: No valid crumb was included in the request 后来通过google找到了解决方案. http://st ...

  9. Linux环境下MySQL 5.6安装与配置----亲测有效----纯离线安装

    一.安装MySQL 1.下载安装包 mysql-5.6.40-linux-glibc2.12-x86_64.tar.gz 下载地址: https://dev.mysql.com/get/Downloa ...

  10. 从零开始的SpringBoot项目 ( 二 ) 使用IDEA创建一个SpringBoot项目

    工欲善其事 , 必先利其器 . IntelliJ IDEA 2019.3.3 x64的安装与破解 下面详细说明下如何使用idea创建我们的第一个springboot项目: 首先打开idea主界面选择 ...