CSS 链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。

  • 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕(解析HTML后)再被加载;
  • 当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面(重绘),也就出现了短暂的花屏现象。

小结:我们应尽量使用 <link> 标签导入外部 CSS 文件,避免或者少用使用其他三种方式