CSS和网络性能

原文信息: 查看原文查看原文

CSS and Network Performance

- Harry

总体上来说,下面这些是为什么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及其性能优化方法,更好地优化你的网站。

分享于 2019-01-29

访问量 1810

预览图片