首屏渲染优化之 critical css

提取首屏加载需要的关键资源 css，可以使用 critical css 工具来完成。

1、安装 node.js

Critical 是一个 Node 的第三方库，帮助我们自动筛选 critical css；
Grunt 是一个自动化任务的命令行工具，依赖于 Node。

2、安装 Grunt

先将 Grunt 命令行（CLI）安装到全局环境中。

$ npm install -g grunt-cli

上述命令执行完成后，grunt命令就被加入到你的系统路径中，以后就可以在任何目录下执行此命令了。

注：安装grunt-cli并不等于安装了Grunt。

3、新建 Grunt 项目。

Grunt项目，需要在你的项目中添加两个文件，package.json和Gruntfile。

1）新建 package.json 文件
package.json：此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。

$ npm init 

这个命令采用互动方式，要求回答一些问题，然后再当前目录生成一个基本的 package.json 文件。

2）新建 grunt 配置文件，Gruntfile.js
此文件被命名为Gruntfile.js或Gruntfile.coffee,用来配置或定义任务并加载Grunt插件。

module.exports = function(grunt) {
    grunt.initConfig({
        critical: {
            dist: {
                options: {
                    base: '/',
                    dimensions: [
                        {
                            width: 1200,
                            height: 800
                        },
                        {
                            width: 800,
                            height: 600
                        }
                    ]
                },
                src:'/hot-topics/index.html',
                dest:'/hot-topics/result.html'
            }
        }
    });
    grunt.loadNpmTasks('grunt-critical');    
    grunt.registerTask('default', ['critical']);
}

定义了希望 Grunt 执行的任务。

另外，如果对多个文件进行处理需要在dist属性里面增加一个files属性，值为一个数组

files:[
	{src:'index1.html',dest:'result1.html'},
	{src:'index2.html',dest:'result2.html'},
	{src:'index3.html',dest:'result3.html'},
	...
]

或者使用以下方式配置整个目录下的文件：

options:{
	src:'*.html',
	dest:'dist/'
}

4、安装 grunt 和插件 grunt-critical

$ npm install grunt grunt-critical --save

5、运行任务

$ grunt critical

如果失败，并提示 Failed to launch the browser process

此报错，说明 Chrome headless doesn’t launch on UNIX，找到对应的服务器环境，确保已安装所有必要的依赖项。比如，我的是 CentOS，那么我需要以下所有依赖项：

$ sudo yum install alsa-lib.x86_64 -y

确保安装所有，可以直接全部一次性再安装一遍。
安装依赖项后，您需要使用它更新库 命令。

$ yum update nss -y

重新运行 grunt ，成功后会生成 result 文件。

6、设置监视任务

如果更改页面内容，Grunt 生成的关键 CSS 不会自动更新。 需要重新运行 Grunt 任务以生成更改的新的关键 CSS。

有一些方法可以使这个过程更有效率。 例如，可以在 Grunt 中设置一个监视任务，当您对网站的 HTML 或 CSS 文件进行更改时，它会自动重新运行关键的 CSS 任务。 以下是如何在 Grunt 中设置监视任务的示例：

module.exports = function(grunt) {
    grunt.initConfig({
        critical: {
            dist: {
                options: {
                    base: '/',
                    dimensions: [
                        {
                            width: 1200,
                            height: 800
                        },
                        {
                            width: 800,
                            height: 600
                        }
                    ]
                },
                src:'/hot-topics/index.html',
                dest:'/hot-topics/result.html'
            }
        },
       watch:{
			files:['index.html','css/*.css'],
			tasks:['critical']
		}
    });
    grunt.loadNpmTasks('grunt-critical');
    grunt.loadNpmTasks('grunt-contrib-watch'); 
       
    grunt.registerTask('default', ['critical', 'watch']);
}

在此示例中，监视任务监视 index.html 和 css/*.css 文件的更改，并且每当检测到更改时，它都会运行关键任务以生成新的关键 CSS。 这样，您可以确保您的关键 CSS 始终是最新的，而无需在每次更改网站内容时手动重新运行 Grunt 任务。

记得安装 grunt-contrib-watch 插件：

$ npm install grunt-contrib-watch --save-dev

监听任务会不会消耗服务器资源呢？

是的，Grunt watch 任务会消耗服务器资源，因为它持续监视项目文件的更改并相应地触发任务。消耗的资源量将取决于项目的大小和被监视的文件数。

但是，监视任务消耗的资源量通常很少，不会对服务器性能产生重大影响。在大多数情况下，watch 任务只会消耗少量的 CPU 和内存资源。

为了进一步减少监视任务对服务器性能的影响，可以尝试debounceDelay在监视任务配置中设置该选项。此选项指定 Grunt 在检测到更改后触发任务之前应等待的时间量（以毫秒为单位）。较长的去抖动延迟有助于减少触发任务的次数，从而有助于最大限度地减少资源使用。

总的来说，虽然 watch 任务可能会消耗一些服务器资源，但它通常是自动化任务和改进开发工作流程的有用工具。通过遵循配置和优化监视任务的最佳实践，您可以确保它高效运行并且对服务器性能的影响最小。

其它的缺点

1.复杂性增加：实施关键 CSS 可能是一个复杂的过程，尤其是对于具有复杂布局的大型网站而言。这会增加优化网站性能所需的时间和资源。
2. 维护：关键 CSS 需要持续维护，因为网站布局或内容的更改会影响关键 CSS 规则。这可能很耗时，并且可能需要定期更新以确保最佳性能。
3. 对动态内容的有限支持：关键的 CSS 工具旨在优化静态内容，并且内链 css 需要生成新的页面