总体上来说,下面这些是为什么CSS对性能这么重要的原因:
- 浏览器必须等到渲染树完全渲染才能渲染页面;
- 渲染树的DOM和CSSOM整合到一起的结果;
- DOM是阻塞JavaScript渲染的HTML等;
- CSSOM是所有被应用到DOM上的CSS规则;
- 可以给JavaScript设置async和defer属性,使JavaScript不被闭塞;
- 要设置CSS异步有很大的不同;
- 所以,最重要的一个规则就是:你的页面渲染能有最快,依赖于最慢的样式文件的渲染时间。
综上,CSS是页面渲染的一个瓶颈,如何打破这个瓶颈,让页面渲染变得更快,减少首次渲染的时间?下面给出几种方法。
1. 提取主要的CSS
一个很有效的减少首次渲染时间的方法,是利用主要CSS类型:将首次渲染需要的所有公共样式抽出来,单独用<style>
标签内联地放到文档的<head>
内,再异步地加载剩下的样式。
虽然这个方法很有效,但是不是那么简单。高度动态化的网站很难拆分样式,这个过程应该自动化,要假定以上的目录是主要样式,很难去界定边缘场景下的情况。随着项目越来越大,这个工作会变得更难。
2. 分割媒体类型
如果实现提取主要CSS比较复杂,可以使用另一个方法:根据媒体查询来将CSS文件拆分成单独的文件,这样方法可以让浏览器根据当前环境(媒介,屏幕尺寸,分辨率和方向等)需要的CSS以高优先级进行下载,阻塞关键路线。对那些不是当前环境需要的CSS文件会以低优先级进行下载,在关键路线下全部完成之后再开始。
以下为一个CSS文件和拆分成多个CSS文件的示例代码:
<!-- 合并成一个CSS文件 -->
<link rel="stylesheet" href="all.css" />
<!-- 根据媒体查询,拆分成多个CSS文件 -->
<link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
以下为两种方式的加载对比,注意优先级(Priority)的区别。
3. 避免在CSS文件中使用 @import
之所以不要在CSS文件中使用@import去引入其他CSS文件,是因为被import的CSS文件,不是异步引入,而是等HTML树和CSS文件加载成功之后,才会去加载被import的CSS文件。
以下为使用@import和不使用@import的示例代码。
<!-- 使用@import -->
<link rel="stylesheet" href="all.css" />
/* all.css中引用内容 */
@import url(imported.css);
<!-- 不适用@import,将imported.css单独引用 -->
<link rel="stylesheet" href="all.css" />
<link rel="stylesheet" href="imported.css" />
以下为这两种方式下,CSS文件的加载过程:
4. Firefox和IE/Edge浏览器中,将@import放到JS和CSS之前
在Firefox和IE/Edge浏览器中,预加载扫描器不会选择任何定义在<script src="" />
和<link rel="stylesheet" />
后面的@import内容。这些被import的CSS文件,会在它前面的JavaScript或CSS文件被完全加载之后才开始被下载。
这种情况的解决方案,是避免使用@import,再使用一个<link rel="stylesheet" />
标签来加载CSS文件。
还有更多的提高CSS性能的方法,可以访问原文进行查看。
- Blink和Webkit浏览器中,将@import地址用引号引起来
- 不要将
<link rel="stylesheet" />
放到异步代码前面 - 将所有非CSSOM查询JavaScript放到CSS前面;将所有CSSOM查询JavaScript放到CSS后面
- 将
<link rel="stylesheet" />
放到<body>
中
希望这篇文章能给你启发,让你更好地理解CSS及其性能优化方法,更好地优化你的网站。