加快首屏渲染速度（一）——抽取critical CSS
阿新 • • 發佈：2019-01-09
核心思路：
一、抽取出首頁需要的css
二、用行內css形式載入這部分css(critical css)
三、等到頁面載入完之後，再載入整個css，會有一部分css與critical css重疊
內嵌關鍵的CSS，具體方法如下：
注意 <link>放在了</html>後面
<html><head><style>.blue{color:blue;}</style></head><body><divclass="blue">Hello, world!
</div>
在網頁載入之後，原始small.css才會載入。
————————————
抽取critical css有自動化工具grunt-criticalcss，完全不需要自己動手
親測好用，
npm install grunt-criticalcss --save-dev我再加點註釋吧
grunt.initConfig({ criticalcss: { custom: { options: { url:"http://localhost:4000", // 你的網址 width: 1200, height: 900, outputfile: "dist/critical.css", filename: "/path/to/local/all.css", // 使用的css的本地路徑 buffer: 800*1024, ignoreConsole: false } } }, });
grunt.loadNpmTasks('grunt-criticalcss');