避免CSS @Import

第一部分 – 第17章

CSS

错误的方式

CSS @ import是将外部CSS文件包括进移动网站页面的方法之一。典型的语法看起来就如同下面的例句。 

@import url("style.css")

移动网站应该避免使用CSS @ import，因为对CSS文件的这种检索方法会减缓页面的加载速度。

  • CSS @ import方法是按照顺序加载CSS文件的，并不支持并行加载。这意味着当页面必须加载多个CSS文件时，一个文件必须等到另一个文件加载完成。
  • 这种序列的文件加载会耗费更多不必要的时间，并使移动网站页面加载速度比实际慢得多。

正确的方式

利用外部CSS文件的正确方式是正常请求这些文件。例如，假设你的外部CSS文件命名为style.css，那对应你的网站页面就应该通过head部分link标签的方法请求这个CSS文件。 

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

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

英文版：Avoid CSS @Import – 繁体中文版：避免CSS @Import






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

Gordon Choi's Mobile Website Book