New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
性能优化之内联 CSS #10
Comments
首先了解阻塞渲染的 CSS了解css的渲染时机,首先我们需要了解在浏览器中看到一个html页面之前的渲染过程
第一步到第五步的进行是同步的,任何一步的执行时间都决定着整个页面出现在你面前的时间,默认css的渲染也是阻塞性的,同时具有 DOM 和 CSSOM 才能构建渲染树。那么接下来我们就来探讨一下如何优化阻塞css。 |
优化阻塞的外链css文件CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。 我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例:
但是请注意,“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。无论哪一种情况,浏览器仍会下载 CSS 资产,只不过不阻塞其它渲染的资源而已。 |
内联关键css何为关键css呢?根据首屏优先的原则,关键css就是初始化首屏页面所用到的css。 如果每次手动发现去复制粘贴首屏部分的css代码,无疑是比较枯燥的事情,还好有相关工具可以帮你快速查找关键 CSS。 首先安装插件
这里以gulp为使用案例进行配置 var critical = require('critical').stream gulp.task('critical', function () { return gulp.src(path.join(filePath, 'map.html')) .pipe(critical({ base: 'dist/', inline: true, width: 1200, height: 640, src: 'map.html', dest: 'map-critical.html', css: [path.join(filePath, 'src/css/main.css')] })) .on('error', function(err){ console.log(err) }) .pipe(gulp.dest(filePath)); }); 除了gulp之外也可以和grunt,npm配合使用 参考资源: |
另外css的优化还可以做本地化 |
将css内联到html之后,应该要注意到html文件的大小,由于tcp慢启动的原因,不推荐内联后的文件大小超过14KB,否则会消耗更过的RTT耗时 |
申领人须知
The text was updated successfully, but these errors were encountered: