合并多个CSS文件

第一部分 – 第09章

CSS

移动网站页面使用多个外部CSS文件是一个非常普遍的现象。

单一CSS文件

使用CSS最常用的方式就是将CSS放到外部文件中，并将这个外部CSS文件包含到网站页面的head部分中。例如，外部CSS文件名为main.css。 

<head>
<link rel="stylesheet" href="main.css" />
</head>

多个CSS文件

大多数情况下，一个单一移动网站页面的head部分中会含有多个外部CSS文件。这种方式并不好，因为下载每个外部CSS文件会增加一个额外却不必要的http请求，从而降低页面的加载速度。

例如，如下移动网站页面head部分有6个外部文件。 

<head>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" href="style3.css" />
<link rel="stylesheet" href="style4.css" />
<link rel="stylesheet" href="style5.css" />
<link rel="stylesheet" href="style6.css" />
</head>

减少HTTP请求

页面要求网络浏览器下载的外部资源越少，页面加载的速度越快。

当网络浏览器必须下载的外部CSS文件变少时，移动网站页面就可以更快加载。为达成这个目标，可以将多个CSS文件合并为更少的文件甚至是一个单一文件。这样的操作将减少http请求的数量。假定你可以合并所有的外部CSS文件为一个单一文件（例如combined.css）。 

<head>
<link rel="stylesheet" href="combined.css" />
</head>

合并多个CSS文件为一个文件

合并所有CSS文件为一个单一文件：

  • 打开所有6个CSS文件。例如main.css、style2.css、style3.css、style4.css、style5.css、以及style6.css。
  • 拷贝并粘贴6个CSS文件中所有的内容到一个新的文件中，例如combined.css。
  • 更新head部分link标签的内容以请求新文件combined.css。
  • 移除所有用于请求其他5个CSS文件的link标签的内容。

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Combine Multiple CSS Files – 繁体中文版：合并多个CSS文件






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book